初探h5<canvas>标签

来源:互联网 发布:高校 人工智能专业 编辑:程序博客网 时间:2024/05/16 06:38

是h5的新标签,可以配合js画图.

<html><head><title>paintTest</title></head><script>var p ; //全局变量,类似画笔function init(){p = document.getElementById('myCanvas').getContext('2d');//矩形p.strokeRect(100,50,200,300);//参数分别为左上角定点坐标,以及宽,高//红色边框p.lineWidth = 5 ; //线宽为5p.strokeStyle = 'rgb(255,0,0)';//画笔颜色p.strokeRect(400,50,100,100);//蓝色矩形p.fillStyle = 'rgb(0,0,255)';p.fillRect(400,50,100,100);//填充矩形//弧线(下半圆)p.beginPath();p.arc(200,50,100,0,Math.PI,false);p.closePath();p.stroke();//弧线(上半圆  实心)p.beginPath();p.arc(500,500,100,0,Math.PI,true);p.closePath();//闭合路径p.fill(); //填充//红色边框p.strokeStyle = 'rgb(255,0,0)';p.stroke();}</script><body onload="init()"><canvas id="myCanvas" width="800" height="1000" >your bowers don`t support h5 . (如果你的浏览器不支持h5则显示这一行!)</canvas></body></html>
1 0
原创粉丝点击