HTML5中的Canvas绘图操作（四）

最新推荐文章于 2025-11-24 09:30:00 发布

翻译最新推荐文章于 2025-11-24 09:30:00 发布 · 1.5k 阅读

文章标签：

#html5 #browser #border #function #image #access

Android移动开发同时被 2 个专栏收录

77 篇文章

订阅专栏

HTML5/CSS/JavaScript

36 篇文章

订阅专栏

继续介绍特效效果。

移动效果：

<!DOCTYPE html>
<html>
	<head>
		<title>The Translate Transform</title>
		<style type="text/css">
			canvas {
				border: dotted 1px black;
				margin: 25px;
			}
		</style>
		<script type="text/javascript">
		    window.onload = function () {
		        var theCanvas = document.getElementById('Canvas1');
		        if (theCanvas && theCanvas.getContext) {
		            var ctx = theCanvas.getContext("2d");
		            if (ctx) {
						ctx.fillStyle = "blue";
						ctx.fillRect(0,0,100,50);
						
						// now translate the origin to the middle of the canvas
						ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
						
						ctx.fillRect(0,0,100,50);						
		            }
		        }
		    }
		</script>
	</head>
	<body>
		<h1>The Translate Transform</h1>
		<p>The translate transform simply repositions the origin of the canvas. In this demo, a rectangle is drawn at the default origin of 0,0. A second
		rectangle is drawn at 0,0 after the translate transform has been applied.</p>
		<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
	</body>
</html>

放大缩小效果：

<!DOCTYPE html>
<html>
	<head>
		<title>The Scale Transform</title>
		<style type="text/css">
			canvas {
				border: dotted 1px black;
				margin: 25px;
			}
		</style>
		<script type="text/javascript">
		    window.onload = function () {
		        var theCanvas = document.getElementById('Canvas1');
		        if (theCanvas && theCanvas.getContext) {
		            var ctx = theCanvas.getContext("2d");
		            if (ctx) {
						ctx.fillStyle = "blue";
						ctx.fillRect(0,0,100,50);
						
						// now perform a scale transform and draw the same size rect again
						ctx.save();
						ctx.scale(1.5,2);
						ctx.fillRect(125,50,100,50);				
						ctx.restore();
					
						ctx.scale(0.5,0.5);
						ctx.fillRect(525,50,100,50);
		            }
		        }
		    }
		</script>
	</head>
	<body>
		<h1>The Scale Transform</h1>
		<p>The scale transform causes drawing operations to be multiplied by the given scale multiples. Here, a rectangle is drawn,
		then a scale transform is applied, and the same rectangle is drawn again (but offset so the difference can be seen). Even though
		they are drawn with the same width and height, the scale transform causes the second rectangle to be drawn larger.</p>
		<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
	</body>
</html>

注意需要调用save和restore函数。

旋转操作：

<!DOCTYPE html>
<html>
	<head>
		<title>The Rotate Transform</title>
		<style type="text/css">
			canvas {
				border: dotted 1px black;
				margin: 25px;
			}
		</style>
		<script type="text/javascript">
		    window.onload = function () {
		        var theCanvas = document.getElementById('Canvas1');
		        if (theCanvas && theCanvas.getContext) {
		            var ctx = theCanvas.getContext("2d");
		            if (ctx) {
						
						ctx.fillStyle = "blue";
						ctx.fillRect(150,30,100,50);

						ctx.rotate(.5);
						ctx.fillRect(150,30,100,50);
						
						
						/*
						ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
						var radian=(Math.PI / 180) * 20;
						for (var degrees = 0; degrees < 360; degrees += 20) {
							ctx.rotate(radian);
							ctx.beginPath();
							ctx.moveTo(-100,0);
							ctx.lineTo(100,0);
							ctx.stroke();
						}
						*/
		            }
		        }
		    }
		</script>
	</head>
	<body>
		<h1>The Rotate Transform</h1>
		<p>.</p>
		<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
	</body>
</html>

直接得到image的像素数据，然后画图：

<!DOCTYPE html>
<html>
	<head>
		<title>Accessing Raw Pixel Data</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, ctx.canvas.width, ctx.canvas.height);

		                // get the image data and convert every 15th row to
		                // a 5-row strip of inverted pixels
		                var curRow = 0, maxRow = ctx.canvas.height;
		                var imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
		                var pixels = imgData.data;

		                while (curRow < maxRow) {
		                    for (var i = 0; i < 5; i++) {
		                        var thisRowBytes = (curRow + i) * ctx.canvas.width * 4;
		                        for (var j = 0; j < ctx.canvas.width * 4; j += 4) {
		                            pixels[thisRowBytes + j] = 255 - pixels[thisRowBytes + j]; // red
		                            pixels[thisRowBytes + j + 1] = 255 - pixels[thisRowBytes + j + 1]; // green
		                            pixels[thisRowBytes + j + 2] = 255 - pixels[thisRowBytes + j + 2]; // blue
		                        }
		                    }
		                    curRow += 15;
		                }
		                ctx.putImageData(imgData, 0, 0);
		            }
		        }
		    }
		</script>
	</head>
	<body>
		<h1>Accessing Raw Pixel Data</h1>
		<p>A very powerful feature of the canvas API is the ability to directly access the individual pixels of the image. 
		This demo shows how to retrieve the pixel data from a canvas, manipulate it, and put it back into the canvas.</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/tulips.jpg" width="715" height="315">
	</body>
</html>