translate()、scale() 和 rotate() 方法都用于修改当前的图形。translate(x, y) 方法将画布上的元素移动到网格上的不同点。在 translate(x,y) 方法中，(x,y) 坐标表明图像在 x 轴和 y 轴方向上应该移动的像素数。drawImage() 方法在 (15,25) 位置上绘制图形，那么可以使用参数为 (20,30) 的 translate() 方法，将图形放在 (15+20, 25+30) = (35, 55) 的位置上。scale(x,y) 方法可改变图形的大小。x 参数指定水平缩放因素，而 y 参数指定垂直缩放因素。例如，scale(1.5, .75) 创建的图形比当前图形在 x 轴方向上大 50%，在 y 轴上大 75%。rotate(angle) 方法可根据指定的角度来选择对象。translate()、scale() 和 rotate() 方法呈现的内容。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE HTML>
<html>
<head>
<Title>Transformations Example</title>
<script>
window.onload = function() {
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
var rectWidth = 250;
var rectHeight = 75;
// translate context to center of canvas
context.translate(canvas.width/2,canvas.height/2);
// half the y component
context.scale(1,0.5);
// rotate 45 degrees clockwise
context.rotate(-Math.PI/4);
context.fillStyle="blue";
context.fillRect(-rectWidth/2,-rectHeight/2,
rectWidth,rectHeight);
// flip context horizontally
context.scale(-1,1);
context.font="30pt Calibri";
context.textAlign="center";
context.fillStyle="#ffffff";
context.fillText("Mirror Image",3,10);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>
|
createLinearGradient() 方法创建线性渐变。createLinearGradient(x0,y0,x1,y1) 沿着由两个点识别到的直线生成渐变：(x0,y0)和 (x1,y1) 分别是渐变的起点和终点。该方法返回一个对象。addcolorStop(offset, color) 方法根据给定的偏移量指定颜色停止点。addColorStop() 方法允许指定介于 0 和 1 之间的偏移量，在该偏移量后将开始渐变到另一种颜色。值 0 是渐变的一端的偏移量；1 是渐变的另一端的偏移量。在定义了颜色渐变之后，就可以将渐变对象分配给 fillStyle()。还可以通过 fillText() 方法使用渐变绘制文本。createradialGradient(x0,y0,r0,x1,y1,r1) 来实现，用六个参数将两种或多种颜色以圆形或锥形的图案融合在一起：(x0,y0) 圆锥的第一个圆形的中心r0 第一个圆形的半径(x1,y1) 圆锥的第二个圆形的中心r1 第二个圆形的半径
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!doctype>
<html>
<head>
<title>Gradient Example</title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//Let's try the gradient on a rectangle
// Create a linear gradient
var fillColor = context.createLinearGradient(50,50, 150,50);
// Set gradient colors
fillColor.addColorStop(0.15,"red");
fillColor.addColorStop(0.35,"black");
fillColor.addColorStop(0.65,"green");
fillColor.addColorStop(0.87,"yellow");
// Assign gradient object to fillstyle
context.fillStyle= fillColor;
// Draw rectangle
context.fillRect(50,50,100,100);
// With text
var fillColorText = context.createLinearGradient(300,50,600,50);
fillColorText.addColorStop(0.2,"red");
fillColorText.addColorStop(0.4,"black");
fillColorText.addColorStop(0.6,"green");
fillColorText.addColorStop(0.8,"yellow");
context.fillStyle= fillColorText;
context.font="40px verdana";
context.textBaseline="top";
context.fillText("With text too!", 300,50)
// Gradient on a diagonal
var fillColordiagonal = context.createLinearGradient(50,200, 100,450);
// Gradient colors
fillColordiagonal.addColorStop(0.2,"red");
fillColordiagonal.addColorStop(0.4,"black");
fillColordiagonal.addColorStop(0.6,"green");
fillColordiagonal.addColorStop(0.75,"yellow");
// Assign gradient object to fillstyle
context.fillStyle= fillColordiagonal;
// Draw rectangle
context.fillRect(50,225, 100,250);
// Draw radial gradient
fillColorRadial = context.createRadialGradient(450,300,0, 450,300,200);
fillColorRadial.addColorStop(0, "red");
fillColorRadial.addColorStop(0.2, "black");
fillColorRadial.addColorStop(0.4, "green");
fillColorRadial.addColorStop(0.7, "yellow");
context.fillStyle = fillColorRadial;
context.rect(300,200,500,400);
context.fill();
}
</script>
</head>
<body>
<div>
<p><canvas id="myCanvas" width="600" height="400"></canvas></p>
</div>
</body>
</html>
|
(责任编辑：12图资源库)
