详解HTML5 canvas画图根基行使要领

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //测试lineCap属性 //配置基准线便于调查 context.moveTo(10,10); context.lineTo(10,200); context.moveTo(200,10); context.lineTo(200,200); context.lineWidth="1"; context.stroke(); //butt context.beginPath(); context.moveTo(10,50); context.lineTo(200,50); context.lineCap="butt"; context.lineWidth="10"; context.stroke(); //round context.beginPath(); context.moveTo(10,100); context.lineTo(200,100); context.lineCap="round"; context.lineWidth="10"; context.stroke(); //square context.beginPath(); context.moveTo(10,150); context.lineTo(200,150); context.lineCap="square"; context.lineWidth="10"; context.stroke(); //测试linJoin属性 //miter context.beginPath(); context.moveTo(300,50); context.lineTo(450,100); context.lineTo(300,150); context.lineJoin="miter"; context.lineWidth="10"; context.stroke(); //round context.beginPath(); context.moveTo(400,50); context.lineTo(550,100); context.lineTo(400,150); context.lineJoin="round"; context.lineWidth="10"; context.stroke(); //square context.beginPath(); context.moveTo(500,50); context.lineTo(650,100); context.lineTo(500,150); context.lineJoin="bevel"; context.lineWidth="10"; context.stroke(); //测试miterLimit属性 context.beginPath(); context.moveTo(700,50); context.lineTo(850,100); context.lineTo(700,150); context.lineJoin="miter"; context.miterLimit="2"; context.lineWidth="10"; context.strokeStyle="#2913EC"; context.stroke();

各属性的差异取值的结果如下：

添补样式

前面用到的fillStyle和strokeStyle除了配置颜色外，还能配置其他添补样式，这里以fillStyle为例：

线性渐变

行使步调

（1）var grd = context.createLinearGradient( xstart , ystart, xend , yend )建设一个线性渐变，配置起始坐标和终点坐标；
（2）grd.addColorStop( stop , color )为线性渐变添加颜色，stop为0~1的值；
（3）context.fillStyle=grd将赋值给context。

径向渐变

该要领与线性渐变行使要领相同，只是第一步吸取的参数纷歧样

var grd = context.createRadialGradient(x0 , y0, r0 , x1 , y1 , r1 );吸取起始圆心的坐标和圆半径以及终点圆心的坐标和圆的半径。

位图添补

createPattern( img , repeat-style )行使图片添补，repeat-style可以取repeat、repeat-x、repeat-y、no-repeat。

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //线性渐变 var grd = context.createLinearGradient( 10 , 10, 100 , 350 ); grd.addColorStop(0,"#1EF9F7"); grd.addColorStop(0.25,"#FC0F31"); grd.addColorStop(0.5,"#ECF811"); grd.addColorStop(0.75,"#2F0AF1"); grd.addColorStop(1,"#160303"); context.fillStyle = grd; context.fillRect(10,10,100,350); //径向渐变 var grd = context.createRadialGradient(325 , 200, 0 , 325 , 200 , 200 ); grd.addColorStop(0,"#1EF9F7"); grd.addColorStop(0.25,"#FC0F31"); grd.addColorStop(0.5,"#ECF811"); grd.addColorStop(0.75,"#2F0AF1"); grd.addColorStop(1,"#160303"); context.fillStyle = grd; context.fillRect(150,10,350,350); //位图添补 var bgimg = new Image(); bgimg.src = "background.jpg"; bgimg.onload=function(){ var pattern = context.createPattern(bgimg, "repeat"); context.fillStyle = pattern; context.strokeStyle="#F20B0B"; context.fillRect(600, 100, 200,200); context.strokeRect(600, 100, 200,200); };

结果如下：

图形调动

平移：context.translate(x,y)，吸取参数别离为原点在x轴偏向平移x，在y轴偏向平移y。

缩放：context.scale(x,y)，吸取参数别离为x坐标轴按x比例缩放，y坐标轴按y比例缩放。

旋转：context.rotate(angle)，吸取参数是坐标轴旋转的角度。

必要声名的是，对图形举办变革后，接下来的一次画图是紧接着上一次的状态的，以是假如必要回到初始状态，要用到context.save();和context.restore();来生涯和规复当前状态:

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!