canvas图形绘制

前面的话

　　前面分别介绍了canvas的基础用法和进阶用法，本文将使用canvas的各种语法进行图形绘制

绘制线条

【绘制线条】

　　下面来尝试绘制一段线条

<canvas id="drawing" style="border:1px solid black"><p>The canvas element is not supported!</p>
</canvas>
<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){var context = drawing.getContext('2d');//开始绘制
    context.beginPath();//将光标移动到(10,10)位置
    context.moveTo(10,10);//从(10,10)点开始绘制一条直线，到(100,100)为止
    context.lineTo(100,100);//线条宽度为5
    context.lineWidth = 5;//线条颜色为浅绿
    context.strokeStyle = "lightgreen";//绘制线条
    context.stroke();
}
</script>

【绘制折线】

　　下面，更进一步，绘制多条折线

<canvas id="drawing" style="border:1px solid black"><p>The canvas element is not supported!</p>
</canvas>
<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){var context = drawing.getContext('2d');context.beginPath();context.moveTo(10,10);context.lineTo(50,50);context.lineTo(10,100);context.lineWidth = 5;context.strokeStyle = "lightgreen";context.stroke();context.beginPath();context.moveTo(60,10);context.lineTo(100,50);context.lineTo(60,100);context.lineWidth = 5;context.strokeStyle = "lightblue";context.stroke();context.beginPath();context.moveTo(110,10);context.lineTo(150,50);context.lineTo(110,100);context.lineWidth = 5;context.strokeStyle = "pink";context.stroke();
}
</script>

【绘制闭合图形】

　　下面绘制四条线条，组合成一个闭合图形

<canvas id="drawing" style="border:1px solid black"><p>The canvas element is not supported!</p>
</canvas>
<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){var context = drawing.getContext('2d');context.beginPath();context.moveTo(10,10);context.lineTo(110,10);context.lineTo(110,110);context.lineTo(10,110);context.lineTo(10,10);context.lineWidth = 10;context.strokeStyle = "lightgreen";context.stroke();
}
</script>

　　结果如下所示，最后一笔闭合的时候有问题，导致左上角有一个缺口。这种情况是设置了lineWidth导致的。如果默认1笔触的话，是没有问题的。但是笔触越大，线条越宽

　　这时，需要使用clothPath()来闭合图形，而最后一笔可以不画出来

<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){var context = drawing.getContext('2d');context.beginPath();context.moveTo(10,10);context.lineTo(110,10);context.lineTo(110,110);context.lineTo(10,110);context.closePath();context.lineWidth = 10;context.strokeStyle = "lightgreen";context.stroke();
}
</script>

　　当然，如果只是画矩形，使用rect()或fillRect()方法更简单

绘制矩形

　　下面来绘制一个背景颜色为红色，尺寸为100*100，位置为(0,0)点的矩形

<canvas id="drawing" style="border:1px solid black"><p>The canvas element is not supported!</p>
</canvas>
<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){var context = drawing.getContext('2d');context.fillStyle = 'red';context.fillRect(0,0,100,100);
}
</script>

　　下面来绘制一个半透明的蓝色描边矩形，尺寸为100*100，位置在(0,0)点

<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){var context = drawing.getContext('2d');context.strokeStyle = 'rgba(0,0,255,0.5)';context.strokeRect(0,0,100,100);}
</script>

　　接下来，在(0,0)点绘制尺寸为100*100背景为半透明红色的矩形， 1s后在(50,50)点绘制尺寸为100*100，描边为半透明蓝色的矩形，1s后使用clearRect()清除矩形

<canvas id="drawing" style="border:1px solid black"><p>The canvas element is not supported!</p>
</canvas>
<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){var context = drawing.getContext('2d');context.fillStyle = 'rgba(255,0,0,0.5)';context.fillRect(0,0,100,100);setTimeout(function(){context.strokeStyle = 'rgba(0,0,255,0.5)';context.strokeRect(50,50,100,100);  },1000);setTimeout(function(){context.clearRect(0,0,300,150);},2000);
}
</script>

绘制弧形

【绘制圆】

<canvas id="canvas"><p>The canvas element is not supported!</p>
</canvas>
<script>
var canvas = document.getElementById('canvas');
if(canvas.getContext){canvas.width = 1000;canvas.height = 200;canvas.style.width = '400px';    var context = canvas.getContext('2d');context.lineWidth = 5;context.strokeStyle = '#058';for(var i = 0; i < 10; i++){context.beginPath();context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
        context.closePath();context.stroke();}
}
</script>

【绘制圆角矩形】

　　圆角矩形的示意图如下所示

<canvas id="canvas" style="border:1px solid black"><p>The canvas element is not supported!</p>
</canvas>
<script>
var canvas = document.getElementById('canvas');
if(canvas.getContext){var cxt = canvas.getContext('2d');var W = 300,H = 150;drawRoundRect(cxt,0,0,W,H,50); cxt.lineWidth = 10;cxt.stroke();       function drawRoundRect(cxt, x, y, w, h, r){  cxt.beginPath();//左上角
        cxt.arc(x+r,y+r,r,Math.PI,Math.PI*3/2);//上侧
        cxt.lineTo(x+w-r,y);//右上角
        cxt.arc(x+w-r,y+r,r,Math.PI*3/2,Math.PI*2);//右侧
        cxt.lineTo(x+w,y+h-r);//右下角
        cxt.arc(x+w-r,y+h-r,r,0,Math.PI/2);//下侧
        cxt.lineTo(x+r,y+h);//左下角
        cxt.arc(x+r,y+h-r,r,Math.PI/2,Math.PI);
        cxt.closePath();}
}
</script>

【绘制弯月】

　　下面是一轮弯月的计算示意图

　　下面将上面的视图变成更通用的函数封装，代码如下

<canvas id="drawing" style="border:1px solid black"><p>The canvas element is not supported!</p>
</canvas>
<script>
if(drawing.getContext){var W = drawing.width = 200;var H = drawing.height = 200;var cxt = drawing.getContext('2d');function dis(x1,y1,x2,y2){return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));}function fillMoon(cxt,d,x,y,r,rot){cxt.save();cxt.translate(x,y);cxt.rotate(rot*Math.PI/180);
    cxt.scale(r,r);cxt.beginPath();cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);cxt.moveTo(0,-1);cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d);
    cxt.closePath();cxt.restore();}fillMoon(cxt,2,100,100,100,0)cxt.fillStyle = '#fb5';cxt.fill();
}
</script>

复杂图形

　　下面基于线条、矩形和弧形，来绘制复杂图形

【绘制魔性图案】

　　设置为正方形的魔性图案，当坐标位置x或y变化1px时，宽度或高度需要变化2px

　　于是，得到下面代码

<canvas id="canvas" width=300 height=300 style="border: 1px solid #aaaaaa;"><p>The canvas element is not supported!</p>
</canvas>
<script>
var canvas = document.getElementById("canvas");
if(canvas.getContext){var context = canvas.getContext("2d");  for(var i=0; i<=20; i++){drawRect(context, 0 + 15 * i, 0 + 15 * i, 300 - 30 * i, 300 - 30 * i);}function drawRect(cxt,x,y,width,height){cxt.beginPath();cxt.rect(x, y, width, height);cxt.lineWidth = 5;cxt.strokeStyle = "blue";cxt.stroke();    }
}
</script>

【绘制五角星】

　　五角星可分为大圆和小圆两部分。大圆控制外侧5个点的坐标位置，小圆控制内侧5个点的坐标位置。下面是详细的角度分析

<canvas id="canvas"><p>The canvas element is not supported!</p>
</canvas>
<script>
var canvas = document.getElementById('canvas');
if(canvas.getContext){var cxt = canvas.getContext('2d');var H = 100,W = 200;canvas.height = H;canvas.width = W;    function drawStar(cxt,r,R,x,y,rotate){if(rotate == undefined){rotate = 0;}cxt.beginPath();for(var i = 0; i < 5; i++){cxt.lineTo(Math.cos((18 + i*72 - rotate)/180*Math.PI)*R + x,-Math.sin((18+i*72 - rotate)/180 * Math.PI) * R + y);cxt.lineTo(Math.cos((54 + i*72 - rotate)/180*Math.PI)*r + x,-Math.sin((54+i*72 - rotate)/180 * Math.PI) * r + y);}cxt.closePath();cxt.stroke();}  drawStar(cxt,30,50,50,50);
}
</script>

【绘制螺旋线】

　　下面是制作螺旋线的示意图

　　从圆心点开始，按照圆的公式向外移动，每次移动时，圆心角逐渐增大，半径逐渐增大

<canvas id="drawing" width="100" height="100"></canvas>
<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){var context = drawing.getContext('2d');var x = drawing.width/2;var y = drawing.height/2;var deg = 0;var r = 1;context.strokeStyle = 'red';context.lineWidth = 2;context.moveTo(x,y);for(var i = 0; i < 4800; i++){deg++;r+=0.01;context.lineTo(x+Math.cos(deg * Math.PI/180)*r,y+Math.sin(deg * Math.PI/180)*r);}context.stroke();
}
</script>