html框架实线,canvas虚线制作与实线部分.html

无标题文档

canvas {

mragin: 1px;

border: 1px solid #000000;

display;block;

}

亲您的浏览版本过低，请升级浏览器或更新到最新版本进行浏览！

var canvas=document.querySelector("what");

var canvas=document.querySelector('#what');

var ctx=canvas.getContext('2d');

/**

*画实线

ctx.beginPath();

ctx.moveTo(100,100)

//lineTo可以多次使用，这样可以省略moveTo！！！

//本方法简称连用

ctx.lineTo(400,100)

ctx.lineTo(400,400)

//ctx.lineTo(100,400)

ctx.lineTo(100,100)

//这个是样式代码

ctx.strokeStyle='#2cbeed';

ctx.lineWidth=3;

ctx.stroke();

ctx.closePath();

*/

//画虚线

//找规律，用其他代替

for(var i=0; i<20;i++)

{

drawLine(100+10*i,100,105,10*i,100,2,'#2cbeed')

}

//drawLine(100,100,105,100,3,'red');

//drawLine(110,100,100,115,3,'yellow');

//drawLine(120,100,125,100,3,'blue');

//drawLine(130,100,135,100,3,'purple');

/**

简便方法，函数

*/

function drawLine(x1,y1,x2,y2,width,color)

{

ctx.beginPath();

ctx.moveTo(x1,y1)

ctx.lineTo(x2,y2)

ctx.strokeStyle=color;

ctx.lineWidth=width;

ctx.stroke();

ctx.closePath();

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史