HTML5 CANVAS制图 基础总结

　　首先，定义2D渲染变量ct（这里用了jquery库）：

VAR ct = $(#canvasId).get(0).getContext('2d');

　　以下是绘制各种基本图形的方法：

复制代码

//绘制矩形(填充/描框)

ct.fillRect(x,y,w,h)

ct.strokeRect(x,y,w,h)

//绘制路径--线条

ct.beginPath();

ct.moveTo(x0,y0);

ct.lineto(x1,y1);

ct.closePath();

ct.stroke();

//绘制路径--圆弧

ct.beginPath();

ct.arc(x,y,r,start,end,true);

ct.closePath();

ct.fill();

//绘制文本

ct.font = "30px serif...";

ct.fillText(txt,x,y);

ct.strokeText(txt,x,y);

//设置样式

ct.fillStyle = "rgb(r,g,b)";

ct.strokeStyle = "rgb()";

ct.lineWidth = 5;

复制代码

　　还提供了一些灵活的方法：

//橡皮擦（擦除矩形范围）

ct.clearRect(x,y,w,h);

//重置样式

canvas.attr("width",w);

二、高级功能

　　以下是对画布的一些变换操作：

复制代码

ct.save()/reStore()  //保存/恢复

ct.translate(x,y)    //平移

ct.scale(a,b)        //放大、缩小

ct.rotate(Math.PI)   //绕(0,0)旋转

//变换矩阵

ct.transform(xScale,ySkew,xSkew,yScale,xTrans,yTrans)   

ct.setTransform(xScale,ySkew,xSkew,yScale,xTrans,yTrans) //重置 

复制代码

　　关于变换矩阵，有一篇很好的文章可以加深你的理解：https://shawphy.COM/2011/01/transformation-matrix-in-front-end.htML

　　这是些常用的操作：

复制代码

ct.globalAlpha = 0.5    //透明度

//阴影

ct.shadowBlur = 20;     //扩散

ct.shadowOffsetX = 10;

ct.shadowOffsetY = 10;

ct.shadowColor = rgba;

//渐变（线性/放射性）

ct.createLineargradient(x,y,x1,y1)

ct.createRadialGradient(x,y,r,x1,y1,r1)

//设渐变的始终颜色

addColorStop(0,"rgb()")/(1,"rgb()");

复制代码

　　贝塞尔曲线绘制：

//最后两个参数是终点的坐标点

ct.beginPath();

ct.moveTo(50,250);

ct.quadraticCurveTo(250,100,450,250)  //两次贝塞尔曲线

ct.bezierCurveTo(150,50,350,450,450,250) //三次贝塞尔曲线

ct.stroke();

　　画布导出为图像：

//生成图片的src地址

var imgURL = canvas.get(0).toDataURL();

//以下将画布替换为图片

var img = $("img> /img> ");

img.attr("src",imgURL);

canvas.replaceWITh(img);

三、图片处理

　　图片的引入和调整（图片的变换就是画布的变换，不再介绍）：

//引入图片

var img = new Image();

img.src = ".jpg";

$(img).load(function(){

   ct.drawImage(参数);     

} )

//图片调整

ct.drawImage(image,x,y,w,h)

//图片裁剪与调整，其中dx/dy/dw/dy为裁剪的参数

ct.drawImage(image,dx,dy,dw,dh,x,y,w,h) 

复制代码

　　高级处理（关于图像像素的绘制和处理，仅供了解）：

//imgData对象

var imgData = ct.getImageData(x,y,w,h)  //获取

//imgData对象的属性

imgData.width/height    //宽高

imgData.data            //像素集合@L_304_0@，表示rgba

//创建图像

var imgData = ct.createImageData(w,h)   

ct.putImageData(imgData,x,y)

　　以上都是比较基本的知识点总结，没写的太细，只求清晰易查及备忘，如果对哪个点不是很明白，完全可以复制关键字GOOGLE。

　　至此，基础知识已经总结完了，不过以上仅仅是基本的静态画布制作而已，如果你懂得灵活应用javascript，结合canvas就可以制作出很漂亮的动画或游戏。这些应用已经很多了，感兴趣可以自行查找相关信息，不过首先你得学会js.

　　首先，定义2D渲染变量ct（这里用了Jquery库）：

var ct = $(#canvasId).get(0).getContext('2d');

　　以下是绘制各种基本图形的方法：

复制代码

//绘制矩形(填充/描框)

ct.fillRect(x,y,w,h)

ct.strokeRect(x,y,w,h)

//绘制路径--线条

ct.beginPath();

ct.moveTo(x0,y0);

ct.lineTo(x1,y1);

ct.closePath();

ct.stroke();

//绘制路径--圆弧

ct.beginPath();

ct.arc(x,y,r,start,end,true);

ct.closePath();

ct.fill();

//绘制文本

ct.font = "30px serif...";

ct.fillText(txt,x,y);

ct.strokeText(txt,x,y);

//设置样式

ct.fillStyle = "rgb(r,g,b)";

ct.strokeStyle = "rgb()";

ct.lineWidth = 5;

复制代码

　　还提供了一些灵活的方法：

//橡皮擦（擦除矩形范围）

ct.clearRect(x,y,w,h);

//重置样式

canvas.attr("width",w);

二、高级功能

　　以下是对画布的一些变换操作：

复制代码

ct.save()/restore()  //保存/恢复

ct.translate(x,y)    //平移

ct.scale(a,b)        //放大、缩小

ct.rotate(Math.PI)   //绕(0,0)旋转

//变换矩阵

ct.transform(xScale,ySkew,xSkew,yScale,xTrans,yTrans)   

ct.setTransform(xScale,ySkew,xSkew,yScale,xTrans,yTrans) //重置 

复制代码

　　关于变换矩阵，有一篇很好的文章可以加深你的理解：https://shawphy.com/2011/01/transformation-matrix-in-front-end.html

　　这是些常用的操作：

复制代码

ct.globalAlpha = 0.5    //透明度

//阴影

ct.shadowBlur = 20;     //扩散

ct.shadowOffsetX = 10;

ct.shadowOffsetY = 10;

ct.shadowColor = rgba;

//渐变（线性/放射性）

ct.createLinearGradient(x,y,x1,y1)

ct.createRadialGradient(x,y,r,x1,y1,r1)

//设渐变的始终颜色

addColorStop(0,"rgb()")/(1,"rgb()");

复制代码

　　贝塞尔曲线绘制：

//最后两个参数是终点的坐标点

ct.beginPath();

ct.moveTo(50,250);

ct.quadraticCurveTo(250,100,450,250)  //两次贝塞尔曲线

ct.bezierCurveTo(150,50,350,450,450,250) //三次贝塞尔曲线

ct.stroke();

　　画布导出为图像：

//生成图片的src地址

var imgURL = canvas.get(0).toDataURL();

//以下将画布替换为图片

var img = $("img> /img> ");

img.attr("src",imgURL);

canvas.replaceWith(img);

三、图片处理

　　图片的引入和调整（图片的变换就是画布的变换，不再介绍）：

//引入图片

var img = new Image();

img.src = ".jpg";

$(img).load(function(){

   ct.drawImage(参数);     

} )

//图片调整

ct.drawImage(image,x,y,w,h)

//图片裁剪与调整，其中dx/dy/dw/dy为裁剪的参数

ct.drawImage(image,dx,dy,dw,dh,x,y,w,h) 

复制代码

　　高级处理（关于图像像素的绘制和处理，仅供了解）：

//imgData对象

var imgData = ct.getImageData(x,y,w,h)  //获取

//imgData对象的属性

imgData.width/height    //宽高

imgData.data            //像素集合数组，表示rgba

//创建图像

var imgData = ct.createImageData(w,h)   

ct.putImageData(imgData,x,y)

　　以上都是比较基本的知识点总结，没写的太细，只求清晰易查及备忘，如果对哪个点不是很明白，完全可以复制关键字google。

　　至此，基础知识已经总结完了，不过以上仅仅是基本的静态画布制作而已，如果你懂得灵活应用javascript，结合canvas就可以制作出很漂亮的动画或游戏。这些应用已经很多了，感兴趣可以自行查找相关信息，不过首先你得学会js.

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！