Canvas元素是HTML5的新元素之一,用于在网页上绘制图形,相当于在HTML中嵌入了一张画布,这样就可以直接在HTML上进行图形操作了,所以它具有极大的的应用价值。Canvas本身是没有绘图能力的,它需要借助javascript来实现绘图的功能。
canvas目前只是一张二维画布,如果想要实现三维效果,需要借助第三方类库。
如何使用canvas来绘图:
只需要向HTML5里添加canvas元素即可,HTML代码:
<canvas id=”mycanvas” width=”200” height=”100”>你的浏览器不支持HTML5</canvas>
Javascript代码:
οnlοad=function(){
draw()
};
function draw(){
/*使用id来寻求canvas元素*/
var canvas=document.getElementById(‘canvassample’);
/*验证canvas元素是否存在,以及浏览器是否支持canvas元素*/
if(!canvas||!canvas.getContext)return false; /*创建context对象*/
var ctx=canvas.getContext(‘2d’);
/*画一个红色矩形*/
ctx.fillStyle=’#FF0000’;
ctx.fillRect(0,0,150,75);
}
HTML代码中,canvas标签内部可以添加文字或HTML代码,如果浏览器不支持canvas标签,那么会自动跳过canvas标签而运行canvas内部的HTML代码或内容。
Javascript代码中,首先要判断canvas这个元素是否讯在及用户所使用的浏览器是否支持此元素。如果无法使用canvas元素,那么接下来所做的事情都是毫无意义了。
使用getContext方法时,传递了一个“2d”参数,这就可以得到二维的context对象以实现二维图像的描画了。
以下为一些简单的栗子:绘制一条直线:
var c=document.getElementById('mycanvas'); //获取HTML中的canvas标签
var ctx=c.getContext('2d'); //返回一个用来绘制环境类型的环境,是一个CanvasRenderingContext2D对象,该对象实现了一个画布所使用的大多数方法
ctx.lineWidth=10; //设置线条宽度
ctx.strokeStyle='red'; //设置画笔颜色
ctx.beginPath(); //创建一个新的路径
ctx.moveTo(10,10); //将画笔光标位置移动到坐标(10,10)处
ctx.lineTo(150,50); //从当前坐标开始移动画笔到坐标(150,50)处,绘制一条直线
ctx.stroke(); //开始绘制定义好的路径
var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
ctx.lineWidth=10;
ctx.strokeStyle='red';
ctx.lineCap='butt';
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(150,10);
ctx.stroke();
ctx.lineCap='round';
ctx.beginPath();
ctx.moveTo(10,40);
ctx.lineTo(150,40);
ctx.stroke();
ctx.lineCap='square';
ctx.beginPath();
ctx.moveTo(10,70);
ctx.lineTo(150,70);
ctx.stroke();
画空心矩形:
var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
ctx.lineWidth=5;
ctx.strokeStyle='red';
ctx.beginPath();
ctx.strokeRect(10,10,70,40); //起点坐标x,坐标y,矩形长,矩形宽
画实心矩形:
方法一:
var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='red';
ctx.beginPath();
ctx.fillRect(10,10,70,40);
方法二:
var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='red';
ctx.beginPath();
ctx.rect(10,10,70,40);
ctx.fill();
画空心圆:
var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
ctx.lineWidth=10;
ctx.strokeStyle='red';
ctx.beginPath();
ctx.arc(100,100,70,0,130*Math.PI/180,true); //圆弧中心的坐标x和坐标y、圆弧半径、起始角度、终止角度、是否逆时针
ctx.stroke();
画实心圆:
var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
ctx.lineWidth=10;
ctx.fillStyle='red';
ctx.beginPath();
ctx.arc(100,100,70,0,130*Math.PI/180,true);
ctx.fill();
画圆角矩形:
var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
ctx.lineWidth=5;
ctx.strokeStyle='red';
ctx.beginPath();
ctx.moveTo(40,20);
ctx.lineTo(100,20);
ctx.arcTo(120,20,120,40,20);
ctx.lineTo(120,70);
ctx.arcTo(120,90,100,90,20);
ctx.lineTo(40,90);
ctx.arcTo(20,90,20,70,20);
ctx.lineTo(20,40);
ctx.arcTo(20,20,40,20,20);
ctx.stroke();
擦除canvas画板:
var c=document.getElementById('mycanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='red';
ctx.beginPath();
ctx.fillRect(10,10,200,100);
ctx.clearRect(30,30,50,50); //clearRect()函数可擦除一个矩形区域
Author:致知
Sign:路漫漫其修远兮,吾将上下而求索。
附: