html5之canvas实例(一)

来源:互联网 发布:电脑定时重启软件 编辑:程序博客网 时间:2024/05/16 08:19
<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body><canvas id="t_canvas" width="1000" height="1000" ></canvas><script type="text/javascript">//画布,将图形画到这上面,超出范围的不显示var t_canvas1=document.getElementById("t_canvas");var context1=t_canvas1.getContext("2d");context1.beginPath();context1.moveTo(0,0);context1.lineTo(0,290);context1.lineTo(290,290);context1.closePath();context1.fillStyle="rgb(200,0,0)";context1.fill();/////绘图1context1.fillStyle="#000000";context1.fillRect(300,300,100,100);context1.fillStyle="#000000";context1.fillRect(100,100,100,100);context1.fillRect(50,50,100,100);</script></body></html>


 

 

 

 

 

截图如下: