HTML5中如何使用canvas
导读：本文共2682.5字符，通常情况下阅读需要9分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： <canvas>新元素<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。 注意: 默认情况下 <canvas> 元素没有边框和内容。 画方<... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。<canvas>新元素
<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。
注意: 默认情况下 <canvas> 元素没有边框和内容。
画方
<!--fillStyle是填充样式，如果不设置fillStyle属性，默认填充色为黑色，fillRect是画一个矩形，参数为X,Y,Width,Height--><!DOCTYPEhtml><html><head><metacharset="UTF-8"name="author"content="赵慧娟"><title></title><scriptsrc="Scripts/jquery-1.10.2.js?1.1.10"></script><scripttype="text/javascript">$(function(){varcanvas=document.getElementById("myCanvas")varctx=canvas.getContext("2d");ctx.fillStyle="deeppink";ctx.fillRect(10,10,100,100); //ctx.moveTo(0,0); //定义开始坐标 //ctx.lineTo(100,100); //定义结束坐标 //ctx.stroke(); //绘制线条})</script></head><body><canvasid="myCanvas"width="100"height="100"></canvas></body></html>
运行结果：
画圆
<!--arc画圆，参数是X,Y,半径，起始角，结束角，顺时针/逆时针(可选)XY指的是圆点的距离--><!DOCTYPEhtml><html><head><metacharset="UTF-8"name="author"content="赵慧娟"><title></title><scriptsrc="Scripts/jquery-1.10.2.js?1.1.10"></script><scripttype="text/javascript">$(function(){varcanvas=document.getElementById("myCanvas")varctx=canvas.getContext("2d");ctx.fillStyle="deeppink";ctx.arc(50,50,50,0,2*Math.PI);ctx.stroke();})</script><styletype="text/css">canvas{border:1pxsolid#000;}</style></head><body><canvasid="myCanvas"width="100"height="100"></canvas></body></html>运行结果：
渐变
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
//创建渐变vargrd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"blue");//填充渐变ctx.fillStyle=grd;ctx.fillRect(10,10,150,80);
运行结果：
径向/圆渐变
varc=document.getElementById("myCanvas");varctx=c.getContext("2d");//创建渐变vargrd=ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0,"red");grd.addColorStop(1,"white");//填充渐变ctx.fillStyle=grd;ctx.fillRect(10,10,150,80);运行结果：
图像
<!DOCTYPEhtml><html><head><metacharset="UTF-8"name="author"content="赵慧娟"><title></title><scriptsrc="Scripts/jquery-1.10.2.js?1.1.10"></script><styletype="text/css">canvas{border:1pxsolid#000;}#flower{border:1pxsolid#000;width:100px;height:100px;}</style></head><body><imgsrc="img/a.ico"id="flower"/><canvasid="myCanvas"width="100"height="100"></canvas><scripttype="text/javascript">$(function(){varcanvas=document.getElementById("myCanvas")varctx=canvas.getContext("2d");varimg=document.getElementById("flower");img.onload=function(){ctx.drawImage(img,20,20,80,80); //drawImage（对象，X,Y，W,H）}})</script></body></html>运行结果：
（右图为canvas图像）
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
HTML5中如何使用canvas的详细内容，希望对您有所帮助，信息来源于网络。