HTML5中的Canvas绘图操作(三)

本节主要内容是组合图形的绘制。


简单的一个阴影绘制如下:

<!DOCTYPE html>
<html>
	<head>
		<title>Drawing Shadows</title>
		<style type="text/css">
			#Canvas1 {
				border: dotted 1px black;
			}
		</style>
		<script>
			window.onload = function() {
				var theCanvas = document.getElementById('Canvas1');
				if (theCanvas && theCanvas.getContext) {
					var ctx = theCanvas.getContext("2d");
					if (ctx) {
						// set up our basic shadow settings
						ctx.shadowColor = "#000000";
						ctx.shadowOffsetX = 10;
						ctx.shadowOffsetY = 10;
						ctx.shadowBlur = 10;
						
						// draw a simple rectangle with a shadow effect
						ctx.fillStyle = "rgba(0,0,255,1)";
						ctx.fillRect(20,20,200,100);
						
						var theString = "Drawing Text on a Canvas";
						// draw the string with some font information
						// change the shadow settings to be a bit lighter
						ctx.fillStyle = "green";
						ctx.shadowColor = "rgba(0,100,100,0.5)";
						ctx.shadowOffsetX = 5;
						ctx.shadowOffsetY = 5;
						ctx.shadowBlur = 5;
						ctx.font = "25pt Georgia";
						ctx.fillText(theString, 250,75);
						
						// draw a red line with a purplish shadow
						ctx.lineCap="round";
						ctx.lineWidth = 25;
						ctx.shadowColor = "rgba(150,0,150,0.5)";
						ctx.shadowBlur = 15;
						ctx.shadowOffsetX = -15;
						ctx.shadowOffsetY = -15;
						ctx.strokeStyle = "red";
						ctx.beginPath();
						ctx.moveTo(50,200);
						ctx.lineTo(450,200);
						ctx.stroke();												
					}
				}
			}
		</script>
	</head>
	<body>
		<h1>Drawing Shadows</h1>
		<p>All drawing operations can produce shadows. This example shows how to make shadows on a variety of canvas operations.</p>
		<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
	</body>
</html>

实际上需要注意的主要是设置如下内容:

ctx.shadowColor = "rgba(150,0,150,0.5)";
ctx.shadowBlur = 15;
ctx.shadowOffsetX = -15;
ctx.shadowOffsetY = -15;

分别设置了阴影的颜色、污迹、偏移量;



下面是一个使用图案的例子:

<!DOCTYPE html>
<html>
	<head>
		<title>Drawing Patterns</title>
		<style type="text/css">
			#Canvas1 {
				border: dotted 1px black;
			}
		</style>
		<script>
			window.onload = function() {
				var theCanvas = document.getElementById('Canvas1');
				if (theCanvas && theCanvas.getContext) {
					var ctx = theCanvas.getContext("2d");
					if (ctx) {
						// create a pattern from another canvas
						var patCanvas = document.getElementById('patCan');
						var patCtx = patCanvas.getContext("2d");
						// draw a line in the canvas
						patCtx.strokeStyle = "red";
						patCtx.lineWidth=1;
						patCtx.beginPath();
						patCtx.moveTo(0,0);
						patCtx.lineTo(25,25);
						patCtx.stroke();
						
						// now use that canvas as a pattern
						var strokePat = ctx.createPattern(patCanvas,"repeat");
						ctx.strokeStyle = strokePat;
						ctx.lineWidth = 25;
						ctx.strokeRect(50,50,200,200);
					}
				}
			}
		</script>
	</head>
	<body>
		<h1>Drawing Patterns</h1>
		<p>Patterns can be created from images, videos, or even other canvas elements.</p>
		<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
		<canvas id="patCan" width="25" height="25"></canvas>
		<video id="vidEl" src="video/podcast_teaser.mp4" controls style="display:none"></video>
	</body>
</html>

另一个使用图案的例子,使用图像填充:

<!DOCTYPE html>
<html>
	<head>
		<title>Drawing Patterns</title>
		<style type="text/css">
			#Canvas1 {
				border: dotted 1px black;
			}
		</style>
		<script>
			window.onload = function() {
				var theCanvas = document.getElementById('Canvas1');
				if (theCanvas && theCanvas.getContext) {
					var ctx = theCanvas.getContext("2d");
					if (ctx) {						
// create a pattern from an image
						var patImg = new Image();
						patImg.onload = function() {
							ctx.fillStyle = ctx.createPattern(patImg,"repeat");
							ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
						}
						patImg.src = "images/desert_desc_bug.gif";
					}
				}
			}
		</script>
	</head>
	<body>
		<h1>Drawing Patterns</h1>
		<p>Patterns can be created from images, videos, or even other canvas elements.</p>
		<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
		<canvas id="patCan" width="25" height="25"></canvas>
		<video id="vidEl" src="video/podcast_teaser.mp4" controls style="display:none"></video>
	</body>
</html>

使用渐变色,分别是直线式的渐变和辐射状的渐变,以下例子展示了其中的差别:

<!DOCTYPE html>
<html>
	<head>
		<title>Drawing Gradients</title>
		<style type="text/css">
			#Canvas1 {
				border: dotted 1px black;
			}
		</style>
		<script>
			window.onload = function() {
				var theCanvas = document.getElementById('Canvas1');
				if (theCanvas && theCanvas.getContext) {
					var ctx = theCanvas.getContext("2d");
					if (ctx) {
						// create a linear gradient
						var linGrd = ctx.createLinearGradient(20,20,220,280);
						// add some color stops: red to blue, blue to green
						linGrd.addColorStop(0, "#f00"); // start with red at 0
						linGrd.addColorStop(0.5, "#00f"); // put blue at the halfway point
						linGrd.addColorStop(1,"#0f0"); // finish with green
						
						// create a rectangle and fill it with the gradient
						ctx.fillStyle = linGrd;
						ctx.fillRect(20,20,200,260);
						ctx.lineWidth = 3;
						ctx.strokeRect(20,20,200,260);
						
						// create a radial gradient
						var radGrd = ctx.createRadialGradient(500,100,20,525,150,100);
						radGrd.addColorStop(0, "#f00"); // start with red at 0
						radGrd.addColorStop(0.5, "#00f"); // put blue at the halfway point
						radGrd.addColorStop(1,"#0f0"); // finish with green
						ctx.fillStyle = radGrd;
						
						ctx.beginPath();
						ctx.arc(525,150,100,0,2*Math.PI);
						ctx.stroke();
						ctx.fill(); 
					}
				}
			}
		</script>
	</head>
	<body>
		<h1>Drawing Gradients</h1>
		<p>The HTML5 Canvas supports two kinds of gradients - linear and radial.</p>
		<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
	</body>
</html>

主要涉及的函数如下:

createLinearGradient

createRadialGradient

addColorStop


图像的绘制例子:

<!DOCTYPE html>
<html>
	<head>
		<title>Drawing Images</title>
		<style type="text/css">
			#Canvas1 {
				border: dotted 1px black;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var theCanvas = document.getElementById('Canvas1');
				if (theCanvas && theCanvas.getContext) {
					var ctx = theCanvas.getContext("2d");
					if (ctx) {
						// draw an image directly onto the canvas at the top left
						var srcImg = document.getElementById("img1");
						ctx.drawImage(srcImg, 0,0);
						
						// draw the image scaled down onto the canvas
						//ctx.drawImage(srcImg, 50,50,350,150);
						
						// draw just a portion of the source image onto the canvas
						//ctx.drawImage(srcImg, 350,200,125,100,50,50,125,100);
						
						// draw the video onto the canvas. We need to set an interval function
						// in order to grab each frame from the video and paint it onto the canvas.
						//var srcVid = document.getElementById("vid1");
						//srcVid.play();
						//setInterval(function () {
							//var theCanvas = document.getElementById('Canvas1');
							//var ctx = theCanvas.getContext("2d");
							//var srcVid = document.getElementById("vid1");
							//ctx.drawImage(srcVid, 0,0);							
						//}, 16);
					}
				}
			}
		</script>
	</head>
	<body>
		<h1>Drawing Images</h1>
		<p>Images can be drawn directly onto a canvas element in a variety of ways. Your code can drawn an image
		directly from an IMG or VIDEO element that is already in the page or loaded dynamically via script, or 
		another canvas element can be used as a source image.</p>
		<canvas id="Canvas1" width="715" height="315">Your browser does not support canvas.</canvas>
		
		<!-- source images used in this example -->
		<img id="img1" src="images/emerald_bay.jpg" width="715" height="315" style="display:none;">
		<video id="vid1" src="video/podcast_teaser.mp4" loop style="display:none"></video>
	</body>
</html>

注意drawImage的三种形式:

drawImage(srcImg, dx,dy);

drawImage(srcImg, dx,dy,dw,dh);
drawImage(srcImg, sx,sy,sw,sh,dx,dy,dw,dh);

drawImage函数同样可以用于显示视频。


使用遮盖:

<!DOCTYPE html>
<html>
	<head>
		<title>Clipping Paths</title>
		<style type="text/css">
			#Canvas1 {
				border: dotted 1px black;
			}
		</style>
		<script>
		    window.onload = function () {
		        var theCanvas = document.getElementById('Canvas1');
		        if (theCanvas && theCanvas.getContext) {
		            var ctx = theCanvas.getContext("2d");
		            if (ctx) {
		                // draw an image
		                var srcImg = document.getElementById("img1");

		                // create a circle clipping path 
		                ctx.arc(ctx.canvas.width / 2, ctx.canvas.height / 2, 150, 0, 2 * Math.PI);
                        ctx.clip();
/*
                        // create an arbitrary clipping path
                        ctx.beginPath();
                        ctx.moveTo(105, 200);
                        ctx.lineTo(250, 25);
                        ctx.lineTo(525, 50);
                        ctx.lineTo(475, 285);
                        ctx.closePath();
                        ctx.clip();
*/
		                ctx.drawImage(srcImg, 0, 0);
		            }
		        }
		    }
		</script>
	</head>
	<body>
		<h1>Clipping Paths</h1>
		<p>Clipping paths restrict drawing to a particular area of the canvas. Think of clipping paths as masks - 
        areas where the mask is empty show through, while areas where the mask is opaque do not.</p>
        <p>Any path can be a clipping path. You simply draw the path as normal and then call the context's clip() 
        function to create one.</p>
		<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
		<img id="img1" src="images/emerald_bay.jpg" width="715" height="315" style="display:none;">
	</body>
</html>





  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值