canvas 绘制图形2

最新推荐文章于 2023-09-27 15:04:55 发布

原创最新推荐文章于 2023-09-27 15:04:55 发布 · 878 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Canvas #HTML #JavaScript

JS 同时被 2 个专栏收录

15 篇文章

订阅专栏

HTML5

13 篇文章

订阅专栏

本文介绍了使用HTML5 Canvas进行绘图的高级技巧，包括绘制贝塞尔曲线、创建阴影和渐变效果，以及如何实现旋转和缩放功能。

个人原创,欢迎转载,转载请注明出处http://blog.csdn.net/bud_icelf QQ:909648986

canvas 绘制图形2

本节将介绍绘制贝塞尔曲线,创造阴影效果,创造渐变效果,旋转与放大.

例子1 绘制贝塞尔曲线

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="gbk">
</head>
<body>
	<canvas width="200" height="200" id="myCanvas">
		你的浏览器不支持canvas标签
	</canvas>
	<script type="text/javascript">
		var myCanvas=document.getElementById("myCanvas");
		var context=myCanvas.getContext("2d");
		context.beginPath();
		context.moveTo(10,10);
		context.strokeStyle="blue";
		context.quadraticCurveTo(100,180,180,10);
		context.stroke();
		
		context.beginPath();
		context.moveTo(10,20);
		context.strokeStyle="red";
		context.bezierCurveTo(10,180,180,180,180,20);
		context.stroke();
	</script>
</body>
</html>

效果预览

context.quadraticCurveTo(100,180,180,10);
绘制一条二次贝塞尔曲线,一二参数为控制点,三四参数为结束点.

context.bezierCurveTo(10,180,180,180,180,20);
绘制一条三次贝塞尔曲线,一二参数为控制点1,三四参数为控制点2,五六参数为结束点.

例子2 创造阴影效果

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="gbk">
</head>
<body>
	<canvas width="200" height="200" id="myCanvas">
		你的浏览器不支持canvas标签
	</canvas>
	<script type="text/javascript">
		var myCanvas=document.getElementById("myCanvas");
		var context=myCanvas.getContext("2d");
		context.shadowBlur=5;
		context.shadowColor="black";
		context.shadowOffsetX=5;
		context.shadowOffsetY=5;
		context.fillStyle="red";
		context.fillRect(0,0,100,100);
	</script>
</body>
</html>

效果预览

context.shadowBlur=5;
设置阴影的模糊级数为5.

context.shadowColor="black";
设置阴影的颜色为黑色.

context.shadowOffsetX=5;
设置阴影与形状的水平距离为向右偏移5像素.

context.shadowOffsetY=5;
设置阴影与形状的垂直距离为向下偏移5像素.

例子3 创造渐变效果

<html>
<head>
	<meta charset="gbk">
</head>
<body>
	<canvas width="200" height="200" id="myCanvas">
		你的浏览器不支持canvas标签
	</canvas>
	<script type="text/javascript">
		var myCanvas=document.getElementById("myCanvas");
		var context=myCanvas.getContext("2d");
		var gradient1=context.createLinearGradient(0,0,100,100);
		gradient1.addColorStop(0,"blue");
		gradient1.addColorStop(1,"red");
		context.fillStyle=gradient1;
		context.fillRect(0,0,100,100);
		
		var gradient2=context.createRadialGradient(150,150,5,150,150,50);
		gradient2.addColorStop(0,"blue");
		gradient2.addColorStop(1,"red");
		context.fillStyle=gradient2;
		context.fillRect(100,100,100,100);
	</script>
</body>
</html>

效果预览

var gradient1=context.createLinearGradient(0,0,100,100);
创建线性渐变对象,一二参数为渐变开始点x,y坐标,三四参数为渐变结束点x,y坐标.

gradient1.addColorStop(0,"blue");
规定渐变对象fillStyle 属性中的位置和颜色,一参数为渐变对象中的位置,介于0.0(开始点)到1.0(结束点),二参数为渐变对象中与位置对应的颜色.

context.fillStyle=gradient1;
将渐变对象赋值给fillStyle属性.

var gradient2=context.createRadialGradient(150,150,5,150,150,50);
创建放射状渐变对象,一二参数为开始渐变圆的圆心坐标x,y,三参数为开始渐变圆的圆心半径,四五参数为结束渐变圆的圆心坐标x,y,六参数为结束渐变圆的圆心半径.

例子4 旋转与放大

<html>
<head>
	<meta charset="gbk">
</head>
<body>
	<canvas width="200" height="200" id="myCanvas">
		你的浏览器不支持canvas标签
	</canvas>
	<script type="text/javascript">
		var myCanvas=document.getElementById("myCanvas");
		var context=myCanvas.getContext("2d");
		context.fillRect(0,0,50,50);
		
		context.translate(50,50);
		context.scale(2,2);
		context.rotate(30*Math.PI/180);
		context.fillRect(0,0,50,50);
	</script>
</body>
</html>

效果预览