Canvas入门
程序员文章站
2022-06-04 16:15:44
...
Canvas绘制一条直线
代码如下：
CSS样式：
<style type="text/css">
#mycanvas{
border:1px solid red;
}
</style>
JavaScript部分：
<body>
<canvas id="mycanvas" height="500" width="500">
</canvas>
<script type="text/javascript">
//获取节点
var mycanvas=document.getElementById("mycanvas");
//绘制2D直线
var content=mycanvas.getContext("2d");
content.beginPath();
//绘制直线
//开始坐标
content.moveTo(0,0);
//结束点坐标
content.lineTo(500,500);
//线条宽度
content.lineWidth="10";
//线条颜色
content.strokeStyle="#008000";
//上色
content.stroke();
//关闭节点
content.closePath();
</script>
</body>
标题效果图：
上一篇： 端午节怎么健康养生？ 饮食强身防病