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

  参数 寄义
cp1x   第一个贝塞尔节制点的 x 坐标  
cp1y   第一个贝塞尔节制点的 y 坐标  
cp2x   第二个贝塞尔节制点的 x 坐标  
cp2y   第二个贝塞尔节制点的 y 坐标  
x   竣事点的 x 坐标  
y   竣事点的 y 坐标  

笔墨渲染

与文本渲染有关的首要有三个属性以及三个要领：

  属性 描写
font   配置或返回文本内容的当前字体属性  
textAlign   配置或返回文本内容的当前对齐方法  
textBaseline   配置或返回在绘制文本时行使的当前文本基线  

要领 描写
fillText()   在画布上绘制”被添补的”文本  
strokeText()   在画布上绘制文本（无添补）  
measureText()   返回包括指定文本宽度的工具  

上述的属性和要领的根基用法如下：

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.font="bold 30px Arial"; //配置样式 context.strokeStyle = "#1712F4"; context.strokeText("接待来到我的博客！",30,100); context.font="bold 50px Arial"; var grd = context.createLinearGradient( 30 , 200, 400 , 300 );//配置渐变添补样式 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.fillText("接待来到我的博客！",30,200); context.save(); context.moveTo(200,280); context.lineTo(200,420); context.stroke(); context.font="bold 20px Arial"; context.fillStyle = "#F80707"; context.textAlign="left"; context.fillText("文本在指定的位置开始",200,300); context.textAlign="center"; context.fillText("文本的中心被安排在指定的位置",200,350); context.textAlign="right"; context.fillText("文本在指定的位置竣事",200,400); context.restore(); context.save(); context.moveTo(10,500); context.lineTo(500,500); context.stroke(); context.fillStyle="#F60D0D"; context.font="bold 20px Arial"; context.textBaseline="top"; context.fillText("指定位置在上面",10,500); context.textBaseline="bottom"; context.fillText("指定位置在下面",150,500); context.textBaseline="middle"; context.fillText("指定位置居中",300,500); context.restore(); context.font="bold 40px Arial"; context.strokeStyle = "#16F643"; var text = "接待来到我的博客！"; context.strokeText("接待来到我的博客！",10,600); context.strokeText("上面字符串的宽度为："+context.measureText(text).width,10,650);

结果如下：

其他属性和要领

阴影绘制：

shadowColor 配置或返回用于阴影的颜色。

shadowBlur 配置或返回用于阴影的恍惚级别（数值越大越恍惚）。

shadowOffsetX 配置或返回阴影与外形的程度间隔。

shadowOffsetY 配置或返回阴影与外形的垂直间隔。

我们为之前绘制的五角星添加一下阴影

（编辑：湖南网）

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