HTML5 Canvas 绘图实例教程

2020-03-24 16:00:14

字体：大中小

来源：转载

供稿：网友

本文详细讲解如何利用HTML5 Canvas 绘图的详细教程，供php 网友参考学习

首先要注意： 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#333rgb(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 eb d f0 0 1a水平缩放(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.fill > 
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 //终点坐标)
贝塞尔三次曲线
context.moveTo(x0, y0); //起始点context.bezierCurveTo( x1, y1, //控制点坐标 x2, y2, //控制点坐标 x3, y3 //终点坐标)
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,900font-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.shadowOffsetYcontext.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库：
http://code.google.com/p/explorecanvas/ !--[if IE] script type= text/javascript src= ../excanvas.js /script ![endif]-- 
26.canvas图形库：canvasplus || artisanJS || RGraph
code.google.com/p/canvasplus
artisanjs.com
roopons.com.au/wp-content/plugins/viral-optins/js/rgraph
27.Canvas 的 API 接口文档：
developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
以上就是HTML5 Canvas 绘图实例教程的详细内容，其它编程语言        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。