HTML5之canvas详解

Canvas教程：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

对于HTML5的内容，由于目前并不是所有的浏览器都兼容，所以我们首先需要判断你所用的浏览器是否支持canvas标签，判断方法如下:

<canvas id='canvas' width='300' height='200'>你的浏览器不支持canvas</canvas>

如果你的浏览器支持canvas标签，那么就不会显示那句话，否则就会显示出来。

1. 定义canvas标签

	<canvas id="canv"></canvas>

2. 在canvas画图

	//js代码
	var c= document.getElementById("canv");
	var m=c.getContext("2d");
	m.fillStyle="#f00";
	m.fillRect(0,0,300,300);
	m.fillStyle="rgba(0,0,255,0.5)";
	m.fillRect(200,200,500,500);

3. 画直线，定义连接，节点

	m.lineWidth=5;//定义线条的宽度
	m.strokeStyle="red";//定义线条的样式
	m.moveTo(10,10);//起始位置
	m.lineTo(150,150);终止位置
	m.lineTo(10,50);如果没有再次设置起始位置将从结束位置开始画
	m.stroke() 开始划线。

注意：如果没有stroke()函数，表示还没有画图终止，会不给你显示！！
所以，画点完成必须stroke()，包括画圆、矩形等都是，一定要stroke才会绘制上去。

4. 画圆

		<script type="text/javascript">
		var cObj=document.getElementById("myCanvas");
		var cnt = cObj.getContext("2d");
		cnt.beginPath();//从新开始画，防止冲突重叠
		cnt.fillStyle="#0ff";
		cnt.arc(100,100,50,0,Math.PI*2,true);
		cnt.closePath();//结束画布，防止冲突重叠
		cnt.fill();//开始渲染
		// document.οnclick=function(even){
		// 	alert(even.clientX+":"+even.clientY);
		// }
	</script>

arc()里面有6个参数，第一个参数和第二个参数表示所要画弧(圆)的圆心，第三个参数表示半径，第四个参数0表示从3点钟的方向开始画(x轴哪里)，第五个参数表示所画圆弧的大小，第六个参数为true表示逆时针，false为顺时针.

5. 渐变色

	<script type="text/javascript">
		var c = document.getElementById("myCanvas");
		var cnt = c.getContext("2d");
		var m=cnt.createLinearGradient(0,0,175,50);
		m.addColorStop(0,"blue");
		m.addColorStop(0.5,"green");
		m.addColorStop(1,"red");
		cnt.fillStyle = m;
		cnt.fillRect(0,0,175,50);
	</script>

效果如下：

是不是很漂酿O(∩_∩)O

6. 图像

	<script type="text/javascript">
		var c = document.getElementById("myCanvas");
		var cnt = c.getContext("2d");
		var img = new Image();
		img.src = "04.jpg";
		cnt.drawImage(img,0,0);
	</script>

在图像上我们可以画一些图像等，比如水印效果，因为他们都是在canvas画布上。

7. clearRect()函数：可以从我们所画的区域擦除一部分图像

	ctn.clearRect(0,0,100,50);//从(0,0)点开始擦除长100，宽50的面积

8. save和restore
   使用示例：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/save#%E7%A4%BA%E4%BE%8B

9. translate 移动原点、旋转、缩放、矩阵变换
   

10. 组合 和 裁撤clip

11. 动画
    参考示例：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animations

canvas的宽度受父元素影响吗？

具体来说:

1. 如果没有在HTML中指定canvas元素的宽度和高度属性,那么canvas元素的实际大小将继承其父元素的大小。

2. 如果在CSS中设置了canvas元素的宽高样式,那么canvas元素将按照CSS定义的宽高进行渲染,但画布的实际大小仍然是默认的300像素。

3. 如果在HTML中通过width和height属性直接设置了canvas元素的宽高,那么画布的实际大小就是设置的宽高,不受父元素的影响。

为了保证canvas元素能够正确地填充父元素,通常需要同时在HTML和CSS中设置宽高属性。比如:

<canvas id="myCanvas" width="800" height="600"></canvas>

#myCanvas {
  width: 100%;
  height: 100%;
}

总之,canvas元素的宽度和高度是可以受到其父元素大小的影响的,开发者需要根据实际需求合理设置canvas的大小。