<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script>
function createCanopyPath(context) {
// Draw the tree canopy
context.beginPath();
context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo(-5, -110);
context.lineTo(-15, -110);
// Top of the tree
context.lineTo(0, -140);
context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, -80);
context.lineTo(25, -50);
// Close the path back to its start point
context.closePath();
}
function drawTree(context) {
// Create a 3 stop gradient horizontally across the trunk
var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);
// The beginning of the trunk is medium brown
trunkGradient.addColorStop(0, '#663300');
// The middle-left of the trunk is lighter in color
trunkGradient.addColorStop(0.4, '#996600');
// The right edge of the trunk is darkest
trunkGradient.addColorStop(1, '#552200');
// Apply the gradient as the fill style, and draw the trunk
context.fillStyle = trunkGradient;
context.fillRect(-5, -50, 10, 50);
// A second, vertical gradient creates a shadow from the
// canopy on the trunk
var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
// The beginning of the shadow gradient is black, but with
// a 50% alpha value
canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
// Slightly further down, the gradient completely fades to
// fully transparent. The rest of the trunk gets no shadow.
canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');
// Draw the shadow gradient on top of the trunk gradient
context.fillStyle = canopyShadow;
context.fillRect(-5, -50, 10, 50);
// Create the shape for our canopy path
createCanopyPath(context);
//描繪樹枝
context.lineWidth = 4;
context.lineJoin = 'round';
context.strokeStyle = '#663300';
context.stroke();
//填充樹枝
context.fillStyle = '#339900';
context.fill();
}
function drawTrails() {
var canvas = document.getElementById('trails');
var context = canvas.getContext('2d');
context.save();
context.translate(130, 230);
drawTree(context);
context.restore();
context.save();
context.translate(260, 500);
context.scale(2, 2);
drawTree(context);
context.restore();
context.save();
context.translate(-10, 350);
//道路
context.beginPath();
// The first curve bends up and right
context.moveTo(0, 0);
context.quadraticCurveTo(170, -50, 260, -190);
// The second curve continues down and right
context.quadraticCurveTo(310, -250, 410,-250);
// Draw the path in a wide brown stroke
context.strokeStyle = '#663300';
context.lineWidth = 20;
context.stroke();
// Restore the previous canvas state
context.restore();
}
window.addEventListener("load", drawTrails, true);
</script>
</head>
<body>
<canvas id="trails" style="border: 1px solid;" width="400" height="600">
</canvas>
</body>
</html>
HTML5 Canvas (2)
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章