css3-canvas

1.canvas画布,是一个标签。

2.画矩形:1> 空心 stroke

                   2>实心 fill

 strokeRect()  绘制空心矩形 默认为黑色 

语法 context.strokeRect(x,y,width,height)

3.画线:

context.moveTo(x,y) 线条开始坐标

context.lineTo(x,y) 线条结束坐标

beginPath():开始一条路径

colsePath():关闭一条路径

4.画圆:

context.arc()

语法:context.arc(x,y,r,起始角,结束角,顺逆时针)

counterclockwise="true"

false—顺时针

true—逆时针

默认为顺时针

5.渐变:

线性渐变:createLinearGradient(x1,y1,x2,y2) 第一组参数是起始坐标;

                                                                          第二组参数是结束坐标。

放射性渐变:createRadialGradient(x1,y1,r1,x2,y2,r2)

添加渐变点:addcolorStop(位置,颜色)

例:addcolorStop(0,"pink") 0是开始,1是结束。

6.canvas文本:

1.strokeText(文字,x,y)文字边框

2.fillText(文字,x,y) 文字填充

3.左右对齐方式:textAlign="left,center,right"

4.上下对齐方式:textBaseLine="top,middle,bottom"

7.canvas插入图片:

等图片加载完在执行canvas操作,所以在onlcoad中调用方法

先创建image()图像

语法1:huabi.drawImage(img,x,y)

语法2:huabi.drawImage(img,x,y,width,height)规定图像的宽度和高度

语法3:huabi.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)剪切图像,并定位被剪切的部分

你可能感兴趣的:(css3-canvas)