HTML5canvas基本绘图之填充样式实现.pdf

<canvas></canvas> 是 HTML5 中新增的标签，用于绘制图形，这篇文章主要 为大家详细介绍了 HTML5 canvas 基本绘图之绘制填充方法， 感兴趣的小伙伴们可以参考一 下 <canvas></canvas> 是 HTML5 中新增的标签，用于绘制图形，实际上，这个 标签和其他的标签一样， 其特殊之处在于该标签可以获取一个 CanvasRenderingContext2D 对 象，我们可以通过 JavaScript 脚本来控制该对象进行绘图。 <canvas></canvas> 只是一个绘制图形的容器， 除了 id 、class、style 等属性外， 还有 height 和 width 属性。在 <canvas>> 元素上绘图主要有三步： 1.获取 <canvas> 元素对应的 DOM 对象，这是一个 Canvas 对象； 2.调用 Canvas 对象的 getContext() 方法，得到一个 CanvasRenderingContext2D 对象； 3.调用 CanvasRenderingContext2D 对象进行绘图。 填充样式 前面用到的 fillStyle 和 strokeStyle 除了设置颜色外，还能设置其他填充样式，这里以 fillStyle 为例： &#8226; 线性渐变 使用步骤 &nbsp; （1）var grd = context.createLinearGradient( xstart , ystart, xend , yend ) 创建一个线性渐变， 设置起始坐标和终点坐标； &nbsp; （2 ）grd.addColorStop( stop , color ) 为线性渐变添加颜色， stop 为 0~1 的值； &nbsp; （3）context.fillStyle=grd 将赋值给 context 。 &#8226; 径向渐变 &nbsp; 该方法与线性渐变使用方法类似，只是第一步接收的参数不一样 &nbsp; var grd = context.createRadialGradient(x0 , y0, r0 , x1 , y1 , r1 ); 接收起始圆心的坐标和圆 半径以及终点圆心的坐标和圆的半径。 &#8226; 位图填充 &nbsp; createPattern( img , repeat-style )使用图片填充， repeat-style 可以取 repeat、repeat-x 、 repeat-y、no-repeat。&nbsp; JavaScript Code var canvas = document.getElementById("canvas"); &nbsp;&nbsp; &nbsp; &nbsp; var context = canvas.getContext("2d"); &nbsp;&nbsp; &nbsp; &nbsp; // 线性渐变 &nbsp;&nbsp; &nbsp; &nbsp; var grd = context.createLinearGradient( 10 , 10, 100 , 350 ); &nbsp;&nbsp; &nbsp; &nbsp; grd.addColorStop(0,"#1EF9F7"); &nbsp;&nbsp; &nbsp; &nbsp; grd.addColorStop(0.25,"#FC0F31"); &nbsp;&nbsp; &nbsp; &nbsp; grd.addColorStop(0.5,"#ECF811"); &nbsp;&nbsp; &nbsp; &nbsp; grd.addColorStop(0.75,"#2F0AF1");