canvas画线

最新推荐文章于 2024-05-08 21:02:12 发布

canlynet

最新推荐文章于 2024-05-08 21:02:12 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 canvas 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/canlynet/article/details/84760746

HTML5 canvas 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas API来绘制带有边框的矩形，并提供了具体的JavaScript代码实现。通过不同的参数设置，可以改变矩形的位置、大小、边框宽度及颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();
	}
})();