Canvas画布

最新推荐文章于 2024-04-15 19:42:21 发布

CarrieLj

最新推荐文章于 2024-04-15 19:42:21 发布

阅读量289

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/aimee_lj/article/details/79061795

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

概念：<canvas>元素用于图形的绘制，通过脚本(通常是JavaScript)，<canvas>标签只是图形容器，必须使用脚本来绘制图形

可以通过多种方法使用canvas绘制路线，盒，圆、字符以及添加图像

（1）使用JavaScript来绘制图像

	<body>
		<canvas id="myCanvas" width="200" height="100" style="border: 1px solid #3C3C3C;">
			您的浏览器不支持HTML5 canvas标签
		</canvas>
		
		<script>
			//创建context对象，getContext("2d")对象是内建的HTML5对象，拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			//设置fillStyle属性可以是css颜色，渐变，或者图案。fillStyle默认设置是#000000（黑色）
			ctx.fillStyle = "#FF0000";
			//fillRect(x，y，width，height)定义了矩形当前的填充方式
			ctx.fillRect(0,0,150,75);
		</script>
	</body>

（2）Canvas坐标

canvas是一个二维网格

canvas的左上角坐标为(0,0)

（3）路径

包含两种方法：

moveTo(x,y)定义线条开始坐标

lineTo(x,y)定义线条结束坐标

例子：

        <body>
		<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
			您的浏览器不支持HTML5 canvas标签
		</canvas>
		
		<script>
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d")
			ctx.moveTo(0,0);
			ctx.lineTo(200,100);
			//stroke()方法绘制线条
			ctx.stroke();		
		</script>
	</body>

（4）文本

使用canvas绘制文本，重要的属性和方法如下：

font---定义字体

fillText(text,x,y)---在canvas上绘制实心的文本

strokeText(text,x,y)---在canvas上绘制空心的文本

（5）渐变

渐变可以填充在矩形，圆形，线条，文本等等，各种形状可以定义不同的颜色

包含两种方式来设置canvas渐变