继续介绍特效效果。
移动效果：
<!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>
1868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
