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

HTML5绘制几何图形



HTML5绘制几何图形的两个方法


1. filleRect(float x,float y,float width,float,height)


它是填充一个矩形


2. strokeRect(float x,float y,float width,float,height)


它是画一个空心的矩形。


HTML5并没有直接提供其它几何图形(圆形、椭圆、三角)等方法。但是在后边的课程中,我们会学到HTML5绘制路径,绘制路径的时候我们可以画这些内容。

 


绘制几何图形的几个属性


1. fillStyle="颜色",是设置我们填充矩形的颜色。

2. strokeStyle="颜色"  ,是画这个空心矩形的时候,这个空心的边框颜色是什?#30784;?/p>

3. lineWidth=10;,是空心矩形这个线的宽度。

4. lineJoin="meter|round|bevel",是两条线之间相交的样式,它的可选值有这个3个。(方块的,圆形的等等)

 


程序演示


首先启动HBuilder


HTML5-1.png


新建一个HTML文件,命名为index3.html


在body里面给一个canvas的标签,然后给予一些属性设置


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


然后,在head标签里面写上script的标签,把这个结构先写好


HTML5-2.png


1) 第一步,我们要得到canvas的DOM对象;
var can=document.getElementById("can");


2) 第二步,我们要得到一个画图的对象。
var ctx=can.getContext("2d");


3) 我们要画一个矩形框,先使用这个填充一个颜色,我们填充一个蓝色。ctx.fillStyle="blue";
然后ctx.fillRect(50,50,100,60);
x坐标是50,y坐标是50,宽度是100,高度是60.画个矩形框。


4) 我们运行


HTML5-3.png


这样蓝色的矩形框?#32479;?#29616;了。


再画一个空心的矩形框


1) ctx.strokeStyle="red";(红色)

2) ctx.lineWidth=6;(线的宽度,我们给它6)

3) ctx.lineJoin="miter";(它有3个可选的值)

4) ctx.strokeRect(100,150,100,65);(横坐标,纵坐标,宽度,高度)

然后我们再来运行一次,出现了一个红色的矩形方框。


HTML5-4.png


再来画一个


1) ctx.lineJoin="round";

2) ctx.strokeRect(200,200,100,65);

保存,再运行一下



HTML5-5.png


这里要注意,这个矩形是稍微有一点儿圆角效果的。


再画一个


1) ctx.strokeStyle="#0f0";(绿色)

2) ctx.lineWidth=7;(宽度7)

3) ctx.lineJoin="bevel";

4) ctx.strokeRect(100,80,300,65);

运行看效果,这个绿色的矩形角是个方角,有点儿方。


HTML5-6.png


这个linJoin有3个样式:


round是圆角;
bevel是方角;
miter是还是算方角。

这幅图就是这3种角的样式。


HTML5-7.png


还有几个属性


1) lineWidth是线的宽度。

2) lineJoin是线的样式。

3) fillStyle是设置填充的颜色。

4) strokeStyle是设置边框的颜色。

5) strokeRect是画一个空心的矩形。



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

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

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

客服热线 400-862-8862

回到顶部

闲来玩十三水规律
黑彩时时彩稳赚 众盈带单计划 3D定单双 一分时时彩软件下载 今日胜负彩推荐 众赢彩票计划软件 中国梦论坛65143 oom中国 福彩拖胆玩法介绍 天下釆免费资料大全手机开奖 pk10预测在线网页