canvas-画直线
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas-画直线相关的知识，希望对你有一定的参考价值。
今天学习了一下canvas画直线的方法,下面是我整理的一些笔记，可以分享给入门的朋友...
一、首先你需要在创建canvas标签，同时为标签设置id值
<body>
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto">
您的浏览器不支持
</canvas>
</body>
二、在js中获取画板元素，同时设置基本属性
/*获取画板 设置画板*/
var canvas=document.getElementById(‘canvas‘);
canvas.width=800;
canvas.height=800;
三、你需要创建绘图环境，可以是2d或者3d
/*创建绘图环境*/
var context=canvas.getContext(‘2d‘);
四、然后就是设置一些状态了
/*设置状态：lineWidth指的是描边时边的宽度*/
context.lineWidth=10;
/*开始绘图：beginPath指的是重新指定绘图起点，或者重新开始绘图*/
context.beginPath();
/*绘图起点*/
context.moveTo(100,200);
/*绘制到什么地方去*/
context.lineTo(300,400);
context.lineTo(100,600);
/*封闭绘图*/
context.closePath();
/*设置颜色状态：分别是填充颜色、描边颜色*/
context.fillStyle=‘yellow‘;
context.strokeStyle=‘blue‘;
/*开始绘图：记住一定是先绘图后描边*/
context.fill();
context.stroke();
五、了解了上面绘制直线的基础后，我们就可以封装一个绘制矩形的函数了
/*绘制矩形的函数*/
function drawRect(cxt,x,y,width,height,borderWidth,borderColor,fillColor) {
cxt.beginPath();
cxt.moveTo(x,y);
cxt.lineTo(x+width,y);
cxt.lineTo(x+width,y+height);
cxt.lineTo(x,y+height);
cxt.closePath();
cxt.lineWidth=borderWidth;
cxt.fillStyle=fillColor;
cxt.strokeStyle=borderColor;
cxt.fill();
cxt.stroke();
}
``
drawRect(context,200,200,100,100,10,‘#000‘,‘green‘);
今天就整理了这么多，谢谢您的阅读...
以上是关于canvas-画直线的主要内容，如果未能解决你的问题，请参考以下文章