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

HTML5绘图总结



HTML5的绘图基础 


? 在HTML5以前的时代,前端开发者无法在HTML页面上动态地绘制图片

? HTM5新增了一个<canvas../>元素,相当于一个画布,可以获得一个CanvasRenderingContext2D对象

? CanvasRenderingContext2D提供了很多画图API

 

HTML5的画图主要是通过CanvasRenderingContext2D这个对象的API来完成的,画图的所有方法都被封装到它里边。
在课程内容中,我们都是简称这个对象为:cxt。

 


在Canvas上画图的流程


? 步骤1:得到 <canvas../>DOM对象

? 步骤2:调用Canvas对象的getContext()方法得到CanvasRederingContext2D对象(getContext方法里面传一个参数:”2d?#20445;?/p>

? 步骤3:调用CanvasRederingContext2D完成画图

 


HTML5绘制几何图形


CanvasRenderingContext2D对象,只提供了两个方法来绘制几何图形


1. fillStyle="颜色"

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

3. strokeStyle="颜色"

4. lineWidth=10;

5. lineJoin="meter|round|bevel"

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


并没有直接提供其他几何图形(圆形、椭圆、三角)等方法(这些我们都要通过路径来实现)

画空心和实心


1. 画实心的话,我们可以用fillStyle来设置一下实心的颜色。

2. 然后fillRect来画一个实心的矩形框。

3. 那空心的话,我们用strokeStyle,来设置颜色。

4. lineWidth来设置线条的宽度。

5. 然后lineJoin设置线条交界处,是方角还是圆角。

6. 然后strokeRect来画一个空心的矩形。



HTML5绘制字符串


CanvasRenderingContext2D为绘制文字提供了以下两个方法:

fillText(String text,float x,float y,[float maxwidth]):填 充字符串

strokeText(String text,float x,float y,[float maxwidth]):绘制边框

font="bold 45px 宋体"

textAlign设置绘制字符串的水平对齐方式,start|end|left|right|center

textBaseAlign:重直对齐方式:top|hanging|middle|alphabetic|bottom

在画字符串之前,我们应该使用font="bold 45px 宋体",设置一下字体,这个字体里面其实是3个属性。分别表示文字的:粗细、大小和字体。

在设置完了以后,就可以画文字了。fillText是画的实心的文字;strokeText是画的空心的文字。



设置阴影


shadowBlur:阴影模糊度,浮点数越大越模糊

shasowColor:阴影颜色

shadowOffsetX: x方向的偏移

shadowOffsetY: y方向的偏移

 


绘制路径


在Canvas上使用路径步骤:


1. 调用CanvasRenderingContext2D对象的beginPath()方法开始定义路径

2. 调用CanvasRenderingContext2D的各种方法添加路径

3. 调用CanvasRenderingContext2D的closePath方法关闭路径

4. 调用CanvasRenderingContext2D的fill()或stroke()方法来填充路径或绘制路径边框

 


添加路径的方法


1. arc() 方法创建弧/曲线(用于创建圆或部分圆

2. arcTo()  方法在画布上创建介于两个切线之间的弧/曲线

3. bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点,向当前路径添加一个点。方法在画布上创建介于两个切线之间的弧/曲线

4. lineTo() 方法添加一个新点,然后创建从该点到画布中最后指定点的线条(该方法并不会创建线条)

5. moveTo 把路径移动到画布中的指定点,不创建线条

6. quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添加一个点。

7. rect() 方法创建矩形

 


控制填充风格


线性渐变


1. CanvasGradient代表渐变填充

2. CanvasPattern代表位?#30424;?#20805;


使?#23186;?#21464;步骤


3. step1:ctx.createLinearGradient(x,y,xend,yend)返回CavasGradient对象

4. step2:调用CanvasGradient对象的addColorStop(offset,color)向线性渐变中填加颜色,offset值在0-1之间

5. step3:将CanvasGradient对象赋值给xtx.fillStyle或strokeStyle属性


这个渐变,我们有线性渐变和圆形渐变,还有填充图像。


圆形渐变:


这个它的原理也是和线性渐变一样的,就是两个圆,半径到半径之间的这个渐变。

 


绘制位图


1. CanvasRenderingContext2D绘图方法:


drawImage(Image image,x,y)


参数  描述

img   规定要使用的图像、画布或视频。

sx   可选。开?#25216;?#20999;的 x 坐标位置。

sy   可选。开?#25216;?#20999;的 y 坐标位置。

swidth  可选。被剪切图像的宽度。

sheight 可选。被剪切图像的高度。

x   在画布上放置图像的 x 坐标位置。

y   在画布上放置图像的 y 坐标位置。

width  可选。要使用的图像的宽度。(伸展或缩小图像)

height  可选。要使用的图像的高度。(伸展或缩小图像)

 

2. 绘制位图


? var image=new Image();

? image.src=图片地址;

? image.onload=function()

? {

?    ctx.drawImage(...);

? }


3.绘制位图有一个细节一定要注意:


就是必须得等这个位图加载完?#29616;?#21518;,才能绘制,否则的话,就绘制失败。反正原理就是,在绘图之前,这个图片是加载到内存的,加载完这个DOM才能进行绘图。

 


【本文由麦子学院独?#20197;?#21019;,转载请注明出处并保留原文链接】

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

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

客服热线 400-862-8862

回到顶部

闲来玩十三水规律
36码特围网址 双色球胆拖规则 极速快三看球稳赚软件 北京pk拾直播开奖结果 最火棋牌扑鱼直播视频 怎样选双色球中奖率高 微信红包猜大小单双群 助赢软件cpzyrj·COm 幸运飞艇和值对应规律 重庆时时官网下载