闲来玩十三水规律|十三水马牌赢了怎么算|

HTML5画图程序


开发工具:我是用的是HBuilder。大家可以使用像记事本一样,dreamware一样的工具,都可以。


1.我们新建一个HTML5的项目,命名为html5_canvas


HTML5-1.png


2. 我们打开这个项目,里面有一个默认的index.html文件,打开之后,这里面就是一个HTML5的结构,在它上面进行画图。


HTML5-2.png


3. 首先呢!我们在body里面写上canvas标签,并给它一个id:can,; 


width:400像素;
height:300像素;
style:border: 1px #000 solid; margin: 30px auto;


HTML5-3.png


4. 我们先运行,看看这个画布(使用火狐浏览器预览)


HTML5-4.png


5. 那么再看如何画图呢?


我们这里提供一个script标签。


HTML5-5.png



这里有两种方式,本来我们画图需要把这个script放在canvas的下面。因为页面加载是从上往?#24405;?#36733;的。


HTML5-6.png


1) 第一步呢!我们是需要获得canvas的对象。


那么就是var can=document.getElementById("can");

然后var ctx=can.getContext("2d");(这里面只能写2d)

这样就得到了canvas的对象。


HTML5-7.png


2) 那么再调用这个对象的API进行画图。

这是填充的颜色。
ctx.fillStyle="#CCC";

这个有四个参数,第一个是横坐标,第二个是纵坐标,然后是宽度和高度(画一个矩形)。
ctx.fillRect(50,50,100,60);

然后我们运行看一下结果,刚才我们就在这画布上画了一个矩形框。


HTML5-8.png


这是一种方法。


6. 然后我们把这个所有内容复制一下


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<canvas id="can" width="400" height="300" style="border: 1px #000 solid; margin: 30px auto;"></canvas>

<script language="JavaScript">

var can=document.getElementById("can");

  var ctx=can.getContext("2d");

ctx.fillStyle="#CCC";

ctx.fillRect(50,50,100,60);

</script>

</body>

</html>


7. 然后新建一个html文件,取名为index2.html。


把刚才复制的?#31243;?#21040;这里。


1) 我们也可以这样做,把这个script写在这个head里面,再放到一个函数里面。


HTML5-9.png


2) 但是,我们必须要让页面加载完了以后才得到它。


所以呢!我们在body里面给一个onload事件,这样就能够在页面加载完成之后再调用这个init方法。


HTML5-10.png


3) 这个我们把矩形框的颜色变成红色,保存一下。


HTML5-11.png


4) 然后,我们再次运行一下,这样就变成了一个红色的矩形框。


HTML5-12.png



总结


这一节,我们?#27493;?#20102;画图的基本方法。

1. 基本方法就是,在页面上给一个canvas元素。

2. 然后通过得到canvas的DOM。

3. 通过canvasDOM对象得到 CanvasRederingContext2D对象。

然后调用它的相应的API来进行画图



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
? 2012-2016 www.znlucv.tw
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服?#35748;?400-862-8862

回到顶部

闲来玩十三水规律
中国福利彩票单式规则 3D毒胆倍投 自动投注足球网 双色球拖胆投注 一码一肖 11选5助手哪个好 宝宝计划安卓版本 定位胆三期必中方法 一包刮刮奖中奖概率 现在干什么可以一夜赚两千元