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图形绘制

【绘制折线】

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

<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>
canvas图形绘制

  下面来绘制一个半透明的蓝色描边矩形,尺寸为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>
canvas图形绘制

  接下来,在(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图形绘制

绘制弧形

【绘制圆】

<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图形绘制
<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图形绘制

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

<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图形绘制
<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图形绘制

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

<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>
上一篇:scp基本使用方法


下一篇:ajax json 动态传值