html5的画布canvas——画出简易的矩形框、3角形案

日期:2021-01-20 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

最先在html网页页面中置放1个canvas元素,在其中canvas元素应当具有3个特性ID、width、height。

拷贝编码
编码以下:

<canvas id="demo" width="600" height="600"></canvas>

获得canvas目标并获得左右文var cxt=document.getElementById('demo').getContext("2d");在其中主要参数2d是明确的。

刚开始绘图,有两种方式,1种是描边(fill),1种是填充(stroke)。

javascript编码:

拷贝编码
编码以下:

<script language="javascript">
var cxt=document.getElementById('demo').getContext("2d");
cxt.beginPath();
cxt.fillStyle="#F00";/*设定填充色调*/
cxt.fillRect(0,0,200,100);/*绘图1个矩形框,前两个主要参数决策刚开始部位,后两个各自是矩形框的宽和高*/
cxt.beginPath();
cxt.strokeStyle="#000";/*设定边框*/
cxt.lineWidth=3;/*边框的宽度*/
cxt.strokeRect(0,120,200,100);
cxt.beginPath();
cxt.moveTo(0,350);
cxt.lineTo(100,250);
cxt.lineTo(200,300);
cxt.closePath();/*可选流程,关掉绘图的相对路径*/
cxt.stroke();
</script>

实际效果图: