HTML5 Canvas 绘图

时间：2023-04-11 13:41:07

首先要注意： <canvas> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Explorer 9.

需要先获得2D渲染上下文才能绘制<canvas>元素

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

Canvas是基于状态绘制图像的。

基本使用：
1.使用下面两个方法就可以定义一个路径

context.moveTo(x,y); //起点

context.lineTo(x,y); //连线到终点

2.对于多个路径，如果想要分开处理，需要在路径定义的首尾加上下面两个方法，把他们分隔开

context.beginPath();

context.closePath();

3.路径样式

context.lineWidth    //定义线条宽度

context.strokeStyle    //定义线条颜色

context.fillStyle    //填充颜色

context.stroke();    //绘制线条

context.fill();        //绘制填充的颜色块

4.绘制弧线

context.arc(

    centerx, centery, radius,    //圆心坐标(x,y)以及半径r

    startingAngle, endingAngle,    //开始的弧度值，和结束的弧度值

    anticlockwise = false        //可选参数，（false顺时针绘制）还是（true逆时针绘制）

)

5.绘制矩形

context.rect(x, y, width, height); //设置矩形状态

context.fill();

context.stroke();

//或者

context.fillRect(x, y, width, height); //绘制填充的矩形

context.strokeRect(x, y, width, height); //绘制边框的矩形

6.fillStyle、strokeStyle的属性值的格式

#FFF

#333

rgb(255,128,0)

rgba(100,100,100,0.8)

hsl(20,62%,28%)

hsla(40,83%,33%,0.6)

red

7.线条的帽子：lineCap
用于设置线条两端的形状，有以下三种值：

butt(default)    //默认缺省

round    //圆头

square    //方头

context.lineCap = "round";

8.线条与线条相交的形态：lineJoin
   三种属性值：

miter(default)    //尖角

bevel    //斜接

round    //圆角

context.lineJoin = "round";

//当尖角很尖锐时，会出现lineJoin为bevel

//此时跟另外一个属性有关：miterLimit，默认值是10

//当在lineJoin为miter情况下，miterLimit大于10时，lineJoin会自动变成bevel

9.图像变换和状态保存
图像变换：

位移：translate(x,y);

旋转：rotate(deg);

缩放：scale(sx,sy);

//保存当前图形状态:

context.save();

//恢复图形的所有状态：

context.restore();

//使用：

context.save();

context.translate(x,y);

context.restore();

10.变换矩阵

a    c    e

b    d    f

0    0    1

a水平缩放(1)

b水平倾斜(0)

c垂直倾斜(0)

d垂直缩放(1)

e水平位移(0)

f垂直位移(0)

即：默认时，该变换矩阵为单位阵

//设置变换矩阵

transform(a,b,c,d,e,f);

//重置变换矩阵

setTransform(a,b,c,d,e,f);

11.线性渐变

var grd = context.createLinearGradient(xstart,ystart,xend,yend);//开始坐标到结束坐标

grd.addColorStop(stop,color);//stop为浮点数，开始坐标点到结束坐标点直线上，某个位置（0.0~1.0之间）

//例：

var skyStyle = context.createLinearGradient(0,0,800,800);

skyStyle.addColorStop(0.0, 'black');

skyStyle.addColorStop(1.0, 'blue');

context.fillStyle = skyStyle;

12.径向渐变

var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);//开始圆心坐标到结束圆心坐标，以及半径

grd.addColorStop(stop,color);//stop为浮点数，开始坐标点到结束坐标点直线上，某个位置（0.0~1.0之间）

13.图片填充

createPattern(img,repeat-style) //img为图片对象，repeat-style填充格式

//其中repeat-style: no-repeat/repeat-x/repeat-y/repeat

//例：

var backgroundImage = new Image();

backgroundImage.src = "bg.jpg";

backgroundImage.onload = function(){

var pattern = context.createPattern(backgroundImage,"repeat");

context.fillStyle = pattern;

context.fillRect(0,0,800,800);

}

14.canvas填充

createPattern(canvas,repeat-style) //canvas对象，repeat-style填充格式

例：

    window.onload=function(){

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

        canvas.width=800;

        canvas.height=800;

        var context=canvas.getContext("2d");

        var backCanvas=createBackgroundCanvas();

        var pattern=context.createPattern(backCanvas,"repeat");

        context.fillStyle=pattern;

        context.fillRect(0,0,800,800);

   }

    function createBackgroundCanvas(){

        var backCanvas=document.createElement("canvas");

        backCanvas.width=100;

        backCanvas.height=100;

        var backContext=backCanvas.getContext("2d");

        backContext.beginPath();

        backContext.moveTo(15,15);

        backContext.lineTo(50,50);

        backContext.lineWidth=10;

        backContext.strokeStyle="green";

        backContext.stroke();

        return backCanvas;

    }

15.video填充

createPattern(video,repeat-style) //video视频对象

16.另一种弧线绘制方法

context.arcTo(

    x1,y1,x2,y2,    //x1,y1,x2,y2两个坐标与起始点x0,y0组成一个角

    radius    //半径

)

例：

context.moveTo(x0,y0);

context.arcTo(x1,y1,x2,y2,R);

//起始点为(x0,y0)，该弧线与01线以及12线相切

17.贝塞尔曲线
贝塞尔二次曲线

context.moveTo(x0, y0);    //起始点

context.quadraticCurveTo(

    x1, y1,    //控制点坐标

    x2, y2    //终点坐标

)

参考：http://tinyurl.com/html5quadratic

贝塞尔三次曲线

context.moveTo(x0, y0);    //起始点

context.bezierCurveTo(

    x1, y1, //控制点坐标

    x2, y2, //控制点坐标

    x3, y3  //终点坐标

)

参考：http://tinyurl.com/html5bezier

18.文字渲染

context.font = "font-style font-variant font-weight font-size font-family";    //css字体样式，默认值："20px sans-serif"

context.fillText(String, x, y, [maxlen]);    //String字符串，和坐标位置，第四个为可选参数，这行文字的最长宽度

context.strokeText(String, x, y, [maxlen]);    

font-style: normal    (Default)

            italics   (斜体字)

            oblique   (倾斜字体)

font-variant: normal  (Default)

              small-caps    (小写英文字母变成小的大写字母)

font-weight: normal   (Default)

             lighter

             bold

             bolder

             100,200,300,400(normal)

             500,600,700(bold)

             800,900

font-size:  20px (Default)

            2em

            150%

font-family: 设置多种字体备选，支持@font-face

文本水平对齐：

context.textAlign = left

                    right

                    center

文本垂直对齐：

context.textBaseline =  top

                        middle

                        bottom

                        alphabetic (Default)

                        ideographic

                        hanging

文本的度量：

context.measureText(String).width //获取渲染的字符串的宽度

19.阴影

context.shadowColor    //阴影颜色

context.shadowOffsetX    //阴影的位移值

context.shadowOffsetY

context.shadowBlur    //阴影模糊度

20.全局方法：

context.globalAlpha = 1 (Default)    //全局透明度，默认不透明

context.globalCompositeOperation = "source-over" (Default) //绘制的图像在重叠的时候的效果，默认是(source-over)后面绘制的图像覆盖前面绘制的图像

"source-atop"    //后面绘制的图像覆盖前面绘制的图像，但后面的图像只显示重叠部分

"source-in"    //后面绘制的图像覆盖前面绘制的图像，但只显示重叠部分

"source-out"    //只显示后绘制的图像，而且重叠部分被切掉

"destination-over"    //前面绘制的图像覆盖后面绘制的图像

"destination-atop"    //前面绘制的图像覆盖后面绘制的图像，但前绘制的图像只显示重叠部分

"destination-in"    //前面绘制的图像覆盖后面绘制的图像，但只显示重叠部分

"destination-out"    //只显示前绘制的图像，而且重叠部分被切掉

"lighter"    //重叠部分颜色叠加融合

"copy"    //只显示后绘制图像

"xor"    //异或，重叠部分被挖空

21.剪辑区域
将当前创建的路径设置为当前剪切路径的方法

void ctx.clip();

void ctx.clip(fillRule);

void ctx.clip(path, fillRule);

fillRule

这个算法判断一个点是在路径内还是在路径外。

path
需要剪切的 Path2D 路径。

例：

ctx.arc(100, 100, 75, 0, Math.PI*2, false);

ctx.clip();

ctx.fillRect(0, 0, 100,100);

22.非零环绕原则
路径方向
应用：镂空剪纸效果

23.canvas交互

context.clearRect(x,y,width,height) //清空指定的区域

context.isPointInPath(x,y) //点击检测函数，该点是否在当前规划路径内，当检测点包含在当前或指定的路径内，返回 true；否则返回 false

//以下两个是获取鼠标点击在canvas坐标

var x = event.clientX - canvas.getBoundingClientRect().left;

var y = event.clientY - canvas.getBoundingClientRect().top;

24.扩展Canvas的context
将drawStar方法扩展到context：

CanvasRenderingContext2D.prototype.drawStar = function(){}

25.Canvas兼容性
检测

<canvas id="canvas">当前浏览器不支持Canvas，请更换浏览器再试</canvas>

Canvas与IE6、7、8浏览器的兼容性问题

引入explorecanvas库：

https://code.google.com/p/explorecanvas/

<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->

26.canvas图形库：canvasplus || artisanJS || RGraph

http://code.google.com/p/canvasplus

http://artisanjs.com

http://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph

27.Canvas 的 API 接口文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D

相关文章