html5中在canvas上绘图

canvas是通过JavaScript控制的,而且其大小必须在绘制的时候就确定大小,不能再通过控制或改变canvas元素的大小

//html代码

<canvas id="my_canvas" width="150" height="150">

	fallback content here

</canvas>



//js代码

//通过JavaScript查看浏览器是否支持canvas元素

var canvas=document.getElement('my_canvas');

//先通过id属性获得canvas,看浏览器支持canvas的getContext方法

if(canvas.getContext){

	//2d的意思表示创建的是一个风格,左上角是坐标原点

	var context=canvas.getContext("2d");

	//设置图形的颜色为红色

	context.fillStyle="rgb(200,0,0)";

	//设置图形的起点坐标X\Y,长和宽,下面画的是一个起点是(10,10)长和宽都是100的正方形

	context.fillRect(10,10,100,100);

	//向画布中加入文字

	context.font='italic 40px sans-serif';

	context.textBaseline='top';

	context.fillText('AwesomeCo',60,0);

	//在canvas中绘制线条

	context.lineWidth=2;

	context.beginPath();

	//画四个点

	context.moveTo(0,40);

	context.lineTo(30,0);

	context.lineTo(60,40);

	context.lineTo(285,40);

	//只有使用了stroke方法才能画出线来

	context.stroke();

	context.closePath();

	//移动画板原点

	//在移动原点前要先使用save()方法保留原点，以便恢复时使用，设置为还原点，还原点是以栈的结构存储

        //恢复时可以通过restore()恢复到栈最上面的还原点

	context.save();

	//移动到新的原点，并画一个正方形

	context.translate(20,20);

	context.fillRect(0,0,20,20);

	//绘制三角形

	//要先给画笔上色

	context.fillStyle='#fff';//注意到给画笔上色的两种方法可以使用rgb(a,b,c)也可以使用‘#abc’样式

	//strokeStyle可以用来设置图形轮廓的颜色

	context.strokeStyle='#fff';



	context.lineWidth=2;

	context.beginPath();

	context.moveTo(0,20);

	context.lineTo(10,0);

	context.lineTo(20,20);

	context.lineTo(0,20);

	context.fill();

	context.closePath();

	context.restore();

}else{

	//如果浏览器不支持canvas则此处应用来显示替代canvas的文本内容

}

知识点扩充：

比较stroke与fill,strokeStyle与fillStyle的区别

stroke:线条，外形，轮廓

fill:封闭图形的内部

在使用stroke及fill时都要先使用

context.lineWidth=;

context.beginPath()

/**/

/**/

context.closePath();

stroke中的/**/内容为

context.strokeSytle=;

context.stroke();

为所画的内容画线条

fill中的/**/内容为

context.fillStyle=;

context.fill();

当所画的图形为封闭图形时，画笔会自动上色并且全部显示出来

这两个方法也可能同时使用

由于IE9之前的版本不能很好的兼容canvas元素，Google发布了一个名为ExplorerCanvas的库，为IE用户开放了几乎所有的Canvas APi

我们在使用时只需要将js引入就可以

<!--[if lte IE 8]>

<script type=”text/javascript” 

        charset=”utf-8”

        src=”js/excanvas.js”>

</script>
<!--[endif]-->