Html5 canvas学习和笔记—

Html5 canvas学习和笔记——初级

七娃博客 2019-08-22 442 次

近期很想学CANVAS，想学习那种很炫酷的特效，然后就按照思否的大神《学习HTML5 Canvas这一篇文章就够了》学习了一下，为避免遗忘和丢失，在此做个笔记！

首先，html里面写好canvas，避免浏览器不支持，写入不支持需要加载的图片和文字；

<canvas id="tou" width="300" height="300" style="border: 1px solid #333;"> 你的浏览器不支持canvas
<img src="pages/img/1.png" alt="你的浏览器不支持,就只能给你显示图片了" />
</canvas>

然后，就开始写canvas的js的写法了

1.获取canvas画布；

2.检测浏览器是否支持canvas;

3.创建2d画布，开撸；

var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布

1.再然后就，学画点吧！

Html5 canvas学习和笔记——初级-Qui-Note

<script type="text/javascript">
function draw(){//简单的canvas绘制矩形的方法
	var cv = document.getElementById("tou");//获取canvas画布渲染盒子
	if(!cv.getContext) return;//检测是否支持画布
	var ctx = cv.getContext("2d");//创建二维画布
	ctx.fillStyle = "#000000";//绘制样式
	ctx.fillRect(10,10,10,10);//绘制形状，填充矩形fillRect(x轴位置,y轴位置,宽度,高度);
	 //描边矩形strockRect(x, y, width, height)；
	 //清除矩形区域clearRect(x, y, widh, height)
			}
draw();
</script>

2.然后画直线；

Html5 canvas学习和笔记——初级-Qui-Note

<script type="text/javascript">
function draw(){//绘制线段
	var cv = document.getElementById("tou");//获取canvas画布渲染盒子
	if(!cv.getContext) return;//检测是否支持画布
	var ctx = cv.getContext("2d");//创建二维画布

	ctx.beginPath();//绘制路径开始
	ctx.moveTo(0,0);//绘制路径起点
	ctx.lineTo(300,150);//绘制路径的结束点
	ctx.lineWidth= 5;//线宽，默认是1.0
	ctx.closePath();//闭合路径
	ctx.stroke();//绘制线段,默认为黑色

}
draw();
</script>

3.绘制三角形

<script type="text/javascript">
			function draw(){//绘制三角形
				var cv = document.getElementById("tou");//获取canvas画布渲染盒子
				if(!cv.getContext) return;//检测是否支持画布
				var ctx = cv.getContext("2d");//创建二维画布
				ctx.beginPath();//绘制路径开始
				ctx.moveTo(10,10);//绘制第一个顶点
				ctx.lineTo(50,150);//绘制第二个顶点
				ctx.lineTo(150,80);//绘制第三个顶点
				ctx.closePath();//闭合路径
				ctx.stroke();//绘制线段,默认为黑色
			}
			draw();
		</script>

4.填充三角形

<script type="text/javascript">
			function draw(){//填充三角形
				var cv = document.getElementById("tou");//获取canvas画布渲染盒子
				if(!cv.getContext) return;//检测是否支持画布
				var ctx = cv.getContext("2d");//创建二维画布
				ctx.beginPath();//绘制路径开始
				ctx.moveTo(10,10);//绘制第一个顶点
				ctx.lineTo(50,150);//绘制第二个顶点
				ctx.lineTo(150,80);//绘制第三个顶点
				ctx.closePath();//闭合路径
				ctx.fill();//绘制线段,默认为黑色
			}
			draw();
		</script>

5.圆弧

<script type="text/javascript">
			function draw(){//填充圆弧
				var cv = document.getElementById("tou");//获取canvas画布渲染盒子
				if(!cv.getContext) return;//检测是否支持画布
				var ctx = cv.getContext("2d");//创建二维画布
				ctx.fillRect(50,50,2,3);
				ctx.fillRect(5,100,2,2);
				ctx.beginPath();//绘制路径开始
				ctx.arc(50, 50, 40, 0, 2*Math.PI , false);//第一种方法
				//arc(x, y, r, startAngle, endAngle, anticlockwise):
                //以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)
				//radians=(Math.PI/180)*degrees //角度转换成弧度
				ctx.arcTo(50,50,5,100,100);//第二种方法 参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
				ctx.stroke();//绘制线段,默认为黑色
			}
			draw();
		</script>

补充：画圆

Html5 canvas学习和笔记——初级-Qui-Note

<script type="text/javascript">
			function draw(){//简单的canvas绘制矩形的方法
				var cv = document.getElementById("tou");//获取canvas画布渲染盒子
				if(!cv.getContext) return;//检测是否支持画布
				var ctx = cv.getContext("2d");//创建二维画布
				ctx.beginPath();
				ctx.arc(150,150,50,0,2*Math.PI);
 				ctx.fillStyle= "red";
 				ctx.fill();//填充

 				
			}
			draw();
		</script>

6.贝塞尔一次，二次曲线quadraticCurveTo

Html5 canvas学习和笔记——初级-Qui-Note

<script type="text/javascript">
			function draw(){//贝塞尔一次，二次曲线quadraticCurveTo
				var cv = document.getElementById("tou");//获取canvas画布渲染盒子
				if(!cv.getContext) return;//检测是否支持画布
				var ctx = cv.getContext("2d");//创建二维画布
				ctx.beginPath();//绘制路径开始
				ctx.moveTo(10,10);//绘制第一个顶点，没有起点，贝塞尔曲线是一次直线
				ctx.quadraticCurveTo(50, 20, 10, 60);//贝塞尔曲线
				ctx.stroke();//绘制线段,默认为黑色
			}
			draw();
		</script>

7.贝塞尔三次次曲线bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：

<script type="text/javascript">
			function draw(){//贝塞尔三次次曲线bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：
				var cv = document.getElementById("tou");//获取canvas画布渲染盒子
				if(!cv.getContext) return;//检测是否支持画布
				var ctx = cv.getContext("2d");//创建二维画布
				ctx.beginPath();//绘制路径开始
				ctx.moveTo(10,10);//绘制第一个顶点，可以4个点控制
				var cp1x = 5,cp1y= 8;//控制点1
				var cp2x = 50,cp2y= 46;//控制点2
				var x = 180,y= 46;//控制点2
				ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);//至少三个点
				ctx.stroke();//绘制线段,默认为黑色
			}
			draw();
		</script>

8.画虚线

<script type="text/javascript">
				function draw(){//虚线
				    var cv = document.getElementById("tou");//获取canvas画布渲染盒子
					if(!cv.getContext) return;//检测是否支持画布
					var ctx = cv.getContext("2d");//创建二维画布
				
				    ctx.setLineDash([20, 5]);  // [实线长度, 间隙长度]
				    ctx.lineDashOffset = -10;//lineDashOffset属性设置起始偏移量
				    ctx.strokeRect(50, 50, 210, 210);
				}
				draw();
		</script>

9.写文字

<script type="text/javascript">
				function draw(){//虚线
				    var cv = document.getElementById("tou");//获取canvas画布渲染盒子
					if(!cv.getContext) return;//检测是否支持画布
					var ctx = cv.getContext("2d");//创建二维画布
					ctx.font = "20px sans-serif";
					ctx.textAlign = "center";
					//添加样式
					//font = value当前我们用来绘制文本的样式。这个字符串使用和 CSS font属性相同的语法. 默认的字体是 10px sans-serif。
					//textAlign = value文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
					//textBaseline = value基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
					//direction = value文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
					ctx.fillText("天若有情", 10, 100);//fillText(text, x, y [, maxWidth])在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
//					ctx.strokeText("天若有情", 10, 200);//字体足够大才显示，strokeText(text, x, y [, maxWidth])在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的
				}
				draw();
		</script>

10.虚线框

Html5 canvas学习和笔记——初级-Qui-Note

<script type="text/javascript">
				function draw(){//虚线
				    var cv = document.getElementById("tou");//获取canvas画布渲染盒子
					if(!cv.getContext) return;//检测是否支持画布
					var ctx = cv.getContext("2d");//创建二维画布
				
				    ctx.setLineDash([20, 5]);  // [实线长度, 间隙长度]
				    ctx.lineDashOffset = -10;//lineDashOffset属性设置起始偏移量
				    ctx.strokeRect(50, 50, 210, 210);
				}
				draw();
		</script>

11.translate坐标原点移动

<script type="text/javascript">
				function draw(){//translate坐标原点移动
				    var cv = document.getElementById("tou");//获取canvas画布渲染盒子
					if(!cv.getContext) return;//检测是否支持画布
					var ctx = cv.getContext("2d");//创建二维画布
					ctx.save(); //保存坐原点平移之前的状态
				    ctx.translate(100, 100);
				    ctx.strokeRect(0, 0, 100, 100)
				    ctx.restore(); //恢复到最初状态
				    ctx.translate(220, 220);
				    ctx.fillRect(0, 0, 100, 100)
					}
				draw();
		</script>

12.旋转

<script type="text/javascript">
				function draw(){//rotate旋转坐标轴旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。旋转的中心是坐标原点。
				    var cv = document.getElementById("tou");//获取canvas画布渲染盒子
					if(!cv.getContext) return;//检测是否支持画布
					var ctx = cv.getContext("2d");//创建二维画布
					ctx.fillStyle = "red";
					  ctx.fillRect(0, 0, 50, 50)
					
					  ctx.save();
					  ctx.translate(100, 100);
					  ctx.rotate(Math.PI / 180 * 45);
					  ctx.fillStyle = "blue";
					  ctx.fillRect(0, 0, 100, 100);
					  ctx.restore();
					
					  ctx.save();
					  ctx.translate(0, 0);

					  ctx.restore();
					}
				draw();
		</script>

13.变形

Html5 canvas学习和笔记——初级-Qui-Note

<script type="text/javascript">
				function draw(){//transform变形矩阵
				    var cv = document.getElementById("tou");//获取canvas画布渲染盒子
					if(!cv.getContext) return;//检测是否支持画布
					var ctx = cv.getContext("2d");//创建二维画布

				    ctx.transform(1, 1, 0, 1, 0, 0);
				    ctx.fillRect(0, 0, 100, 100);

					}
				draw();
		</script>

14.clip()把已经创建的路径转换成裁剪路径。裁剪路径的作用是遮罩。只显示裁剪路径内的区域，裁剪路径外的区域会被隐藏。

Html5 canvas学习和笔记——初级-Qui-Note

<script type="text/javascript">
				function draw(){//clip()把已经创建的路径转换成裁剪路径。裁剪路径的作用是遮罩。只显示裁剪路径内的区域，裁剪路径外的区域会被隐藏。
				    var cv = document.getElementById("tou");//获取canvas画布渲染盒子
					if(!cv.getContext) return;//检测是否支持画布
					var ctx = cv.getContext("2d");//创建二维画布

				      ctx.beginPath();
					    ctx.arc(20,20, 100, 0, Math.PI * 2);
					    ctx.clip();
					
					    ctx.fillStyle = "pink";
					    ctx.fillRect(50, 20, 100,100);
					}
				draw();
		</script>

15.形状合成globalCompositeOperation

<script type="text/javascript">
				function draw(){//globalCompositeOperation 合成
				    var cv = document.getElementById("tou");//获取canvas画布渲染盒子
					if(!cv.getContext) return;//检测是否支持画布
					var ctx = cv.getContext("2d");//创建二维画布
				    ctx.fillStyle = "blue";
					ctx.fillRect(0, 0, 200, 200);
					ctx.globalCompositeOperation = "source-in"; //全局合成操作
//1. source-over(default)这是默认设置，新图像会覆盖在原有图像。
//
//2. source-in 仅仅会出现新图像与原来图像重叠的部分，其他区域都变成透明的。(包括其他的老图像区域也会透明)
//
//3. source-out仅仅显示新图像与老图像没有重叠的部分，其余部分全部透明。(老图像也不显示)
//
//4. source-atop新图像仅仅显示与老图像重叠区域。老图像仍然可以显示。
//
//5. destination-over新图像会在老图像的下面。
//
//6. destination-in 仅仅新老图像重叠部分的老图像被显示，其他区域全部透明。
//
//7. destination-out仅仅老图像与新图像没有重叠的部分。 注意显示的是老图像的部分区域。
//
//8. destination-atop 老图像仅仅仅仅显示重叠部分，新图像会显示在老图像的下面。
//
//9. lighter 新老图像都显示，但是重叠区域的颜色做加处理
//
//10. darken 保留重叠部分最黑的像素。(每个颜色位进行比较，得到最小的)blue: #0000ff  red: #ff0000 所以重叠部分的颜色：#000000
//
//11. lighten
//保证重叠部分最量的像素。(每个颜色位进行比较，得到最大的)blue: #0000ff  red: #ff0000 所以重叠部分的颜色：#ff00ff
//
//12. xor 重叠部分会变成透明
//
//13. copy 只有新图像会被保留，其余的全部被清除(边透明)

					ctx.fillStyle = "red";
					ctx.fillRect(100, 100, 200, 200);	 		

					}
				draw();
		</script>

赞 0 收藏分享

觉得文章有用，支持一下作者吧！1分不嫌少，9.9不嫌多！

使用支付宝打赏

使用微信打赏

转载请注明来源：Html5 canvas学习和笔记——初级 - Qui-Note

上篇： var,let及const的区别

下篇： css实现鼠标禁用，禁止选择！

评论 | 0 条评论

登录之后才可留言，前往登录