来老师的专栏

代码如下：context.moveTo(100,100);context.lineWidth = 5;context.strokeStyle = "#ff0000";context.lineTo(100,400);context.lineTo(400,400);context.stroke();

在canvas画布中，首先我们需要了解的是画布的坐标系，画布的左上角为坐标系的原点（0,0），右为X轴，下为Y轴。下述代码：context.moveTo(100,100);context.lineWidth = 5;context.strokeStyle = "#ff0000";context.lineTo(100,400);context.stroke();moveTo将画笔移动到

HTML5中的canvas为HTML5为更好的完成图形的绘制提供的画布。功能强大，具体使用方式为：（1）在页面中嵌入，为在不支持canvas的浏览器中给出准确的提示，可以在标签中嵌入适当的文本。如：        您的浏览器不支持画布的使用，这样在支持canvas的浏览器中，该文本不会显示出来。亦可以在代码中进行控制，如后面的代码所示。（2）画布的大小一般不使用CSS样式表来控制，而使

CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。参数的定义具体如下：

使用html5连续绘制多个图形，绘制七巧板

如何在画布上连续绘制两个图形呢？我们需要在每次的图形前后添加beginPath和closePath方法即可。并且每次绘制需要调用stroke方法。代码如下： context.beginPath(); context.moveTo(100,100); context.lineTo(100,400); context.lineTo(400,400);

context.moveTo(100,100); context.lineTo(100,400); context.lineTo(400,400); context.lineTo(100,100); context.fillStyle = "#0000ff"; context.fill(); context.strokeStyle = "red";

像绘制封闭的线条一样进行预设，然后使用fill()方法即可，如果使用stroke方法则为绘制线条，使用fill方法表示填充封闭线条的封闭区域。代码如下： context.moveTo(100,100); context.lineTo(100,400); context.lineTo(400,400); context.lineTo(100,100);

我们只需要使用lineTo将终点绘制到起点即可。代码如下： context.moveTo(100,100);//起点 context.lineWidth = 5; context.strokeStyle = "#ff0000"; context.lineTo(100,400); context.lineTo(400,400); context.

类似于直线绘制中的，绘制多个图形一样，如果需要绘制多个弧线，应该使用beginPath()方法来开始一个新的路径，但如果每次都调用closePath()则会使弧线变成封闭的图形，代码如下： window.onload = function(){ var canvas = document.querySelector("#c1"); canvas