canvas的使用

来源：互联网发布：知乎发帖被删编辑：程序博客网时间：2024/06/06 09:07

<canvas>是H5新增的标签，用于绘制图形。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

那么，如何用canvas绘制一条简单的线+矩形呢，我们需要这样做：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><canvas id="myCanvas" width="500px" height="300px" style="border: 1px solid #5889B2;">您的浏览器不支持canvas！</canvas><!--        作者：1132438840@qq.com        时间：2015-11-07        描述：script        --><script>var a=document.getElementById("myCanvas");var cxt=a.getContext("2d");               //为2Dcxt.moveTo(10,10);                       //初始位置cxt.lineTo(100,100);                      //结束位置cxt.strokeStyle="#FF0000";              //笔触颜色cxt.stroke();cxt.strokeRect(50,50,150,150);           //这里是绘制矩形</script></body></html>

这样我们就可以轻松的绘制一条直线+矩形啦

。

1 0