01-html Canvas标签的使用案例

来源:互联网 发布:电脑软件应用商店 编辑:程序博客网 时间:2024/05/27 20:28

在页面中绘制一个矩形,并将其填充的颜色设置为红色。

<!--告诉浏览器这是一个Html5的文档--><!DOCTYPE html><html><head><!--网页的编码方式--><meta charset="UTF-8"/></head><body><!--定义一个画布标签,在画布标签中绘制图形--><canvas id="can1" width="500px;" height="500px;" style="border: 1px solid red"></canvas><script type="text/javascript">//得到画布var can=document.getElementById("can1");//得到上下文即画笔var cxt=can.getContext("2d");//矩形的填充的颜色为红色cxt.fillStyle="#FF0000";//填充矩形(x,y,w,h)cxt.fillRect(100,100,300,300);//绘制直线cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();//绘制圆cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script></body></head></html>


原创粉丝点击