【HTML】Canvas(1)-绘制图形

  Canvas元素是HTML5的新元素之一，用于在网页上绘制图形，相当于在HTML中嵌入了一张画布，这样就可以直接在HTML上进行图形操作了，所以它具有极大的的应用价值。Canvas本身是没有绘图能力的，它需要借助javascript来实现绘图的功能。

  canvas目前只是一张二维画布，如果想要实现三维效果，需要借助第三方类库。

 

如何使用canvas来绘图：

只需要向HTML5里添加canvas元素即可，HTML代码：

<canvas id=”mycanvas” width=”200” height=”100”>你的浏览器不支持HTML5</canvas>

Javascript代码：

onload=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:路漫漫其修远兮，吾将上下而求索。

附：

【HTML】Canvas(2)-绘制文本

【HTML】Canvas(3)-绘制图片

【HTML】Canvas(4)-进阶