【HTML5】Canvas绘制基础

什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

1，创建Canvas画布：

<canvas id="canvas"></canvas>

2,javascript获取Canvas对象

    var canvas=document.getElementById("canvas"); 

3,获取具体绘图的上下文对象

    var context=canvas.getContext('2d');//使用context做具体的绘图工作

一、canvas的常用属性、方法

     canvas.width     //设置canvas画布的宽度

     canvas.height    //设置canvas画布的高度

     canvas.getContext('2d')   //获取做具体绘图工作的上下文对象

 

二、绘制的常用属性和方法

     lineWidth       //设置线条宽度

     strokeStyle    //设置线条样式

     fillStyle       //设置一个封闭图形的填充颜色

     moveTo(x,y)    //定义线条的开始位置

     lineTo(x,y)    //定义线条的另一端位置

     beginPath()、closePath()   //定义路径的开始和路径的封闭    

     rect(x,y,width,height)      //定义一个矩形

     arc(X,Y,Radius,startAngle,endAngle,anticlockwise)  //定义一个弧或圆

     

     stroke()      //绘制前面定义的图形

     strokeRect(x,y,width,height)     //绘制矩形

     fill()        //对封闭图形做具体的填充

     fillRect(x,y,width,height)       //填充矩形

     

     

1，绘制直线

<canvas id="canvas" width="400" height="300" style="border:1px gray solid;margin:0 auto"></canvas>
<script>
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//使用context进行绘制
if(context){
context.moveTo(100,100);//起始位置
context.lineTo(200,200);//第二个点位置
context.lineTo(100,200);//第三个点位置（以上一个点位置为起点）
context.lineTo(100,100);
context.lineWidth=1;//定义线条宽度
context.strokeStyle="red";//定义颜色
context.stroke();//绘制操作
}else{
alert("当前浏览器不支持Canvas");
}
}
</script>

2，绘制颜色不同的线条  context.beginPath()  context.closePath()

//-----红色线条
context.beginPath();
context.moveTo(100,100);
context.lineTo(200,200);
context.lineTo(100,200);
context.lineTo(100,100);
context.lineWidth=1;
context.strokeStyle="red";
context.stroke();
context.closePath();
//------黑色线条
context.beginPath();
context.moveTo(120,100);
context.lineTo(200,180);
context.strokeStyle="black";
context.stroke();
context.closePath();

3，绘制七巧板

<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var tangram=[
{coordinate :[{x:0,y:0},{x:250,y:250},{x:0,y:500}],color:"#caff67"},
{coordinate :[{x:0,y:0},{x:500,y:0},{x:250,y:250}],color:"#67beef"},
{coordinate :[{x:0,y:500},{x:125,y:375},{x:250,y:500}],color:"#ef3d61"},
{coordinate :[{x:125,y:375},{x:250,y:500},{x:375,y:375},{x:250,y:250}],color:"#f9f51a"},
{coordinate :[{x:250,y:250},{x:375,y:375},{x:375,y:125}],color:"#a594e0"},
{coordinate :[{x:375,y:125},{x:375,y:375},{x:500,y:250},{x:500,y:0}],color:"#fa8e00"},
{coordinate :[{x:250,y:500},{x:500,y:500},{x:500,y:250}],color:"#f6ca29"},
];
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
if(context){
for(var i=0;i<tangram.length;i++){
Draw(tangram[i],context);
}
}else{
echo("当前浏览器不支持Canvas");
}
}
function Draw(plate,context){
context.beginPath();
context.moveTo(plate.coordinate[0].x,plate.coordinate[0].y);
for(var i=1;i<plate.coordinate.length;i++){
context.lineTo(plate.coordinate[i].x,plate.coordinate[i].y);
}
context.fillStyle=plate.color;
context.fill();
}
</script>

4、绘制一个简单的矩形框

function Draw(context){
context.beginPath();
context.strokeStyle="red";
context.strokeRect(30,30,340,240);
context.closePath();
}

　　

5，绘制弧和圆

使用方法： arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是（圆心X坐标，圆心Y坐标，半径，开始角度（弧度），结束角度弧度，是否按照顺时针画）；

function Draw(context){
context.beginPath();
context.arc(200,150,80,0,1.5*Math.PI,false);//false顺时针，true逆时针，默认是false
context.strokeStyle="green";
context.stroke();
context.closePath();
}

　　在stroke()，前closePath()的话将会封闭路径