26 canvas绘制矩形-优快云博客

本文链接：https://blog.youkuaiyun.com/u014331138/article/details/109344813

26 canvas绘制矩形

1 绘制矩形方法

语法

	canvas提供了三种方法绘制矩形：
		---->绘制一个填充的矩形（填充色默认为黑色）
			fillRect(x, y, width, height)
		---->绘制一个矩形的边框（默认边框为:一像素实心黑色）
			strokeRect(x, y, width, height)
		---->清除指定矩形区域，让清除部分完全透明。	
			clearRect(x, y, width, height)
			
	x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。
	width和height设置矩形的尺寸。（存在边框的话，边框会在width上占据一个边框的宽度，height同理）

示例

	<head>
		<meta charset="UTF-8">
		<title>01_绘制矩形</title>
		<style>
			canvas{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				background-color: #CCC;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您当前浏览器暂不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				// 方式一 绘制填充的矩形
				ctx.fillRect(0,0,50,50);
				// 方式二 绘制一个矩形边框
				ctx.strokeRect(50,50,50,50);
				// 方式三 清除指定矩形区域，让清除的部分完全透明
				ctx.strokeRect(100,100,50,50);
				ctx.clearRect(100,100,50,50);
			}
		</script>
	</body>

效果

2 strokeRect绘制矩形边框时，边框像素渲染问题

问题描述

如上图我们绘制的矩形边框时，理论上讲默认为1px,渲染时边框大小也应该是1px。可实际我们通过PS放大可以看出实际是2px。如下所示

问题分析

canvas在渲染矩形边框时，边框宽度是平均分在偏移位置的两侧。
		context.strokeRect(10,10,50,50)
			:边框会渲染在10.5 和 9.5之间,浏览器是不会让一个像素只用自己的一半的
			  相当于边框会渲染在9到11之间
		context.strokeRect(10.5,10.5,50,50)
			:边框会渲染在10到11之间

如下

修改方式

ctx.strokeRect(50.5,50.5,50,50);

调整后效果

3 添加样式和颜色

语法

    fillStyle   :设置图形的填充颜色。
	strokeStyle :设置图形轮廓的颜色。
		默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）
	lineWidth : 这个属性设置当前绘线的粗细。属性值必须为正数。
		描述线段宽度的数字。 0、 负数、 Infinity 和 NaN 会被忽略。
		默认值是1.0。

示例

	<head>
		<meta charset="UTF-8">
		<title>01_绘制矩形</title>
		<style>
			canvas{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				background-color: #CCC;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您当前浏览器暂不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.fillStyle = "pink";
				ctx.strokeStyle = "green";
				ctx.lineWidth = 20;
				// 方式一 绘制填充的矩形
				ctx.fillRect(0,0,50,50);
				// 方式二 绘制一个矩形边框
				ctx.strokeRect(50.5,50.5,50,50);
				// 方式三 清除指定矩形区域，让清除的部分完全透明
				ctx.strokeRect(100,100,50,50);
				ctx.clearRect(100,100,50,50);
			}
		</script>
	</body>

效果

4 渲染机制

由于canvas渲染性能非常高，渲染机制有别于浏览器本身的渲染机制。因此对于样式及颜色的设置必须写在绘制之前。否则将不会再绘制时生效。

5 lineJoin设定线条与线条结合处的样式

ctx.lineJoin = "round";
    round : 圆角
	bevel : 斜角
	miter : 直角