small_ma

图案与渐变（6）前面我们使用strokeStyle和fillStyle来设置绘制图形的边框颜色和填充颜色。前面的教程我们看到的都是给这两个属性设置具体的颜色值，比如#fff、red之类。其实在Canvas中，除了strokeStylefillStyle设置颜色之外，还可以设置渐变色或图案渐变createLinearGradient(x1, y1, x2, y2)——线型渐变...

如何使用Canvas（1）Canvas是HTML5中的一个标签，其本身与其他标签并无差别，不要将其与其他标签分开看待Canvas的使用如下：向页面添加canvas标签#canvas{ border: 1px solid black;/*设置边框后里你便能够在页面中看见canvas元素了*/}<canvas id="canvas" width="500" ...

用Canvas绘制线段（2）方法介绍ctx.moveTo(x,y)用于移动画笔到(x,y)坐标处，并以此为路径起点进行绘图ctx.lineTo(x,y)指定路径的下一个点的坐标，表示使用直线连接该点与上一个点ctx.stroke()绘制路径ctx.lineWidth=20;设置线段宽度，默认值为1px，较宽的线条在路径上居中，路径上下两边各有...

用Canvas绘制矩形（3）ctx.rect(x, y, width, height)x,y用于确定矩形左上角在Canvas画布坐标系中的位置；width、height表示宽高ctx.rect(100, 100, 200, 100);ctx.stroke();// ctx.fill();注意：rect需要结合stroke或fill使用，因为同前面线段一样，rect只是绘...

用Canvas绘制圆弧与圆角（4）首先清楚一点角度 X (Math.PI/180) = 角度对应的弧度arc(x, y, r, startRad, endRad, 弧形方向)此方法用于绘制圆弧弧形方向——1为逆时针，0为顺时针ctx.arc(250, 250, 100, 0, Math.PI/2, 0);ctx.stroke();arcTo(x1, y1,...

用Canvas绘制贝塞尔曲线（5）Canvas仅提供了二/三次贝塞尔曲线quadraticCurveTo(x1, y1, x2, y2)用于绘制二次贝塞尔曲线由图可知，绘制二次贝塞尔曲线需要三个点(p0/1/2)在绘制时，画笔当前所在点、(x1,y1)、(x2,y2)即为确定二次贝塞尔曲线曲线所需的三个点ctx.moveTo(100, 100);ctx.quadr...