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"); //设置图形的颜色为红色 canvas.fillStyle="rgb(200,0,0)"; //设置图形的起点坐标X\Y,长和宽,下面画的是一个起点是(10,10)长和宽都是100的正方形 canvas.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();
当所画的图形为封闭图形时,画笔会自动上色并且全部显示出来
这两个方法也可能同时使用
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。