canvas画线
index.html
<!DOCTYPE HTML>
<html>
<style type="text/css">
#myCanvas {border: 1px solid #BEBEBE;}
</style>
<body>
<canvas id="myCanvas" width="800" height="600">你的浏览器不支持 HTML5</canvas>
<script src="index.js"></script>
</body>
</html>Javascript:
(function(){ // 闭包，防止变量、方法重复
var canvasDom = document.getElementById("myCanvas");
var context = canvasDom.getContext("2d"); // 获取绘制功能的对象（context：上下文）
drawLineRect(10, 10, 300, 200, 10, 'rgba(0, 0, 0, 0.5)');
drawLineRect(25, 25, 270, 170, 10, 'blue');
drawLineRect(40, 40, 240, 140, 10, '#00DB00');
/**
* [drawLineRect 画矩形]
* @param {[type]} x [起点位置x坐标]
* @param {[type]} y [起点位置y坐标]
* @param {[type]} width [矩形宽度]
* @param {[type]} height [矩形高度]
* @param {[type]} lineWidth [线条宽度]
* @param {[type]} color [线条颜色]
* @return {[type]} [无]
*/
function drawLineRect(x, y, width, height, lineWidth, color) {
context.beginPath(); // 开始路径，如果没有这个和结束路径包围，所有线条都是最后那根线条的样式了
context.moveTo(x, y); // 开始位置
context.lineTo(x+width, y); // 画到此处
context.lineTo(x+width, y+height); // 画到此处
context.lineTo(x, y+height); // 画到此处
context.lineTo(x, y); // 画到此处
context.lineTo(x+width, y); // 画到此处--这句很重要，设置宽度为10，没有这句，起点有缺口
context.lineWidth = lineWidth;
context.strokeStyle = color;
context.closePath(); // 结束路径，应与开始路径呼应(会不会导致内存泄露跟实现有关系)
context.stroke();
}
})(); 相关推荐
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
jinxiutong 2020-05-10
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06
northwindx 2020-04-25