HTML5中的Canvas绘图操作（二）
所有编程的绘图操作基本上都差不多，这里分段举例描述。
设置颜色：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Lines</title>
<style type="text/css">
canvas {
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) {
ctx.fillStyle = "green";
ctx.fillRect(20,20,100,100);
ctx.lineWidth = 5;
ctx.strokeStyle="rgba(0,0,255,1)";
ctx.strokeRect(20,20,100,100);
}
}
}
</script>
</head>
<body>
<h1>Drawing With Colors and Styles</h1>
<p>This example shows how to set the drawing style</p>
<canvas id="Canvas1" width="500" height="200">Your browser does not support canvas.</canvas>
</body>
</html>
绘制直线：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Lines</title>
<style type="text/css">
canvas {
border: dotted 1px black;
}
</style>
<script>
window.onload = function() {
// draw lines of varying widths
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
for (var i = 0; i < 10; i++){
ctx.beginPath();
ctx.lineWidth = i+1;
ctx.moveTo(25, 25+i*15);
ctx.lineTo(475, 25+i*15);
ctx.stroke();
}
}
}
// demonstrate the lineCap endings
var theCanvas = document.getElementById('Canvas2');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// draw the guidelines
ctx.strokeStyle="cyan";
ctx.lineWidth=1;
ctx.beginPath();
ctx.moveTo(50,25);
ctx.lineTo(50,175);
ctx.moveTo(450,25);
ctx.lineTo(450,175);
ctx.stroke();
// draw lines using each lineCap;
ctx.lineWidth = 25;
ctx.strokeStyle="black";
ctx.lineCap="butt";
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(450,50);
ctx.stroke();
ctx.lineCap="round";
ctx.beginPath();
ctx.moveTo(50,100);
ctx.lineTo(450,100);
ctx.stroke();
ctx.lineCap="square";
ctx.beginPath();
ctx.moveTo(50,150);
ctx.lineTo(450,150);
ctx.stroke();
}
}
// Show the lineJoin variations
var theCanvas = document.getElementById('Canvas3');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
ctx.lineWidth = 15;
ctx.strokeStyle="black";
ctx.lineJoin="round";
ctx.beginPath();
ctx.moveTo(25,150);
ctx.lineTo(75,50);
ctx.lineTo(125,150);
ctx.stroke();
ctx.lineJoin="bevel";
ctx.beginPath();
ctx.moveTo(175,150);
ctx.lineTo(225,50);
ctx.lineTo(275,150);
ctx.stroke();
ctx.lineJoin="miter";
ctx.miterLim = 1;
ctx.beginPath();
ctx.moveTo(325,150);
ctx.lineTo(375,50);
ctx.lineTo(425,150);
ctx.stroke();
}
}
}
</script>
</head>
<body>
<h1>Drawing Lines</h1>
<p>This example will draw several styles of lines. First: basic line width</p>
<canvas id="Canvas1" width="500" height="200">Your browser does not support canvas.</canvas>
<p>Next: different settings for lineCap</p>
<canvas id="Canvas2" width="500" height="200">Your browser does not support canvas.</canvas>
<p>Next: different settings for lineJoin</p>
<canvas id="Canvas3" width="500" height="200">Your browser does not support canvas.</canvas>
</body>
</html>
绘制矩形：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Rectangles</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 just a stroked rectangle
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.strokeRect(25,25,100,125);
// draw just a filled rectangle
ctx.fillStyle = "green";
ctx.fillRect(175, 25, 100, 125);
// draw a stroked and filled rectangle
ctx.strokeStyle = "red";
ctx.fillStyle = "yellow";
ctx.lineWidth = 10;
ctx.fillRect(325, 25, 100, 125);
ctx.strokeRect(325,25,100,125);
// clear a rectangle
ctx.clearRect(15, 75, 450, 50);
}
}
}
</script>
</head>
<body>
<h1>Drawing Rectangles</h1>
<p>This example will draw several styles of rectangles</p>
<canvas id="Canvas1" width="500" height="300">Your browser does not support canvas.</canvas>
</body>
</html>
使用路径绘制折线：
<!DOCTYPE html>
<html>
<head>
<title>Drawing 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) {
ctx.strokeStyle = "blue";
ctx.fillStyle = "red";
ctx.lineWidth = 5;
// draw an open path (not closed)
ctx.beginPath();
ctx.moveTo(25,175);
ctx.lineTo(50,25);
ctx.lineTo(125,50);
ctx.lineTo(175,175);
ctx.stroke();
// draw a closed path
ctx.beginPath();
ctx.moveTo(225,175);
ctx.lineTo(250,25);
ctx.lineTo(325,50);
ctx.lineTo(375,175);
ctx.closePath();
ctx.stroke();
// draw a closed path
ctx.beginPath();
ctx.moveTo(425,175);
ctx.lineTo(450,25);
ctx.lineTo(525,50);
ctx.lineTo(575,175);
ctx.fill();
ctx.stroke();
}
}
}
</script>
</head>
<body>
<h1>Drawing Paths</h1>
<p>This example will draw paths, both open and closed</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
</body>
</html>
绘制弧线：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Arcs</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) {
ctx.strokeStyle = "blue";
ctx.fillStyle = "red";
ctx.lineWidth = 5;
// stroke a quarter arc
ctx.beginPath();
ctx.arc(50,150,100,1.5*Math.PI,2*Math.PI);
ctx.stroke();
// stroke a three-quarter arc, going anti-clockwise
ctx.beginPath();
ctx.arc(300,150,100,0,1.5*Math.PI,false);
ctx.stroke();
// stroke and fill a circle
var degrees = 173;
var radians = (Math.PI /180) * degrees;
ctx.beginPath();
ctx.arc(550,150,100,0,radians);
ctx.fill();
ctx.stroke();
}
}
}
</script>
</head>
<body>
<h1>Drawing Arcs</h1>
<p>This example will draw arcs, both open and closed</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
</body>
</html>
绘制曲线，贝塞尔曲线和二次方程曲线：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Bezier and Quadratic Curves</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) {
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
// stroke a simple bezier curve
ctx.beginPath();
ctx.moveTo(50,200);
ctx.bezierCurveTo(50,300,200,100,200,150);
ctx.stroke();
// now make the control points visible
ctx.strokeStyle = "rgba(0,0,0,.25)";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(50,200);
ctx.lineTo(50,300);
ctx.lineTo(200,100);
ctx.lineTo(200,150);
ctx.stroke();
// stroke a quadratic curve
ctx.strokeStyle = "green";
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(400,200);
ctx.quadraticCurveTo(500,100,600,150);
ctx.stroke();
// now make the control points visible
ctx.strokeStyle = "rgba(0,0,0,.25)";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(400,200);
ctx.lineTo(500,100);
ctx.lineTo(600,150);
ctx.stroke();
}
}
}
</script>
</head>
<body>
<h1>Drawing Bezier and Quadratic Curves</h1>
<p>This example will draw bezier and quadratic curves, along with their control points
so you can see how the curve is affected by the control point.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
</body>
</html>
绘制文字：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Text</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) {
var theString = "Drawing Text on a Canvas";
// draw a simple text string using the default settings
ctx.fillText(theString, 20,20);
// draw the string with some font information
ctx.font = "25pt Georgia"
ctx.fillText(theString, 20,60);
// draw the string with a fillStyle color
ctx.fillStyle = "blue";
ctx.fillText(theString, 20,100);
// draw the string with both a stroke and a fill with some opacity setting
ctx.font = "32pt Verdana"
//ctx.textBaseline="middle";
ctx.fillStyle = "yellow";
ctx.strokeStyle = "rgba(0,255,0,0.8)";
ctx.fillText(theString, 20,160);
ctx.strokeText(theString, 20,160);
// use measureText to draw a line under the text
var textW = ctx.measureText(theString);
ctx.beginPath();
ctx.strokeStyle="black";
ctx.moveTo(20,170);
ctx.lineTo(textW.width,170);
ctx.stroke();
}
}
}
</script>
</head>
<body>
<h1>Drawing Text</h1>
<p>This example will draw arcs, both open and closed</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
</body>
</html>
绘制状态：
<!DOCTYPE html>
<html>
<head>
<title>Saving and Restoring Canvas State</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 some drawing information
ctx.strokeStyle = "red";
ctx.fillStyle = "yellow";
ctx.lineWidth = 10;
// draw the first Rectangle
ctx.fillRect(25,25,100,125);
ctx.strokeRect(25,25,100,125);
// now, draw another rectangle with different settings
ctx.save(); // this will save the current settings
ctx.strokeStyle = "green";
ctx.fillStyle = "blue";
ctx.lineWidth = 5;
ctx.fillRect(175, 25, 100, 125);
ctx.strokeRect(175, 25, 100, 125);
ctx.restore(); // now restore the original settings
// draw a stroked and filled rectangle
ctx.fillRect(325, 25, 100, 125);
ctx.strokeRect(325,25,100,125);
}
}
}
</script>
</head>
<body>
<h1>Saving and Restoring the Canvas State</h1>
<p>This example shows how to manage the canvas state using save() and restore()</p>
<canvas id="Canvas1" width="500" height="300">Your browser does not support canvas.</canvas>
</body>
</html>