HTML5中的Canvas绘图操作（二）

来源：互联网发布：js cookie 时间编辑：程序博客网时间：2024/05/20 05:26

所有编程的绘图操作基本上都差不多，这里分段举例描述。

设置颜色：

<!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 widthsvar 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 endingsvar theCanvas = document.getElementById('Canvas2');if (theCanvas && theCanvas.getContext) {var ctx = theCanvas.getContext("2d");if (ctx) {// draw the guidelinesctx.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 variationsvar 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 rectanglectx.strokeStyle = "blue";ctx.lineWidth = 5;ctx.strokeRect(25,25,100,125);// draw just a filled rectanglectx.fillStyle = "green";ctx.fillRect(175, 25, 100, 125);// draw a stroked and filled rectanglectx.strokeStyle = "red";ctx.fillStyle = "yellow";ctx.lineWidth = 10;ctx.fillRect(325, 25, 100, 125);ctx.strokeRect(325,25,100,125);// clear a rectanglectx.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 pathctx.beginPath();ctx.moveTo(225,175);ctx.lineTo(250,25);ctx.lineTo(325,50);ctx.lineTo(375,175);ctx.closePath();ctx.stroke();// draw a closed pathctx.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 arcctx.beginPath();ctx.arc(50,150,100,1.5*Math.PI,2*Math.PI);ctx.stroke(); // stroke a three-quarter arc, going anti-clockwisectx.beginPath();ctx.arc(300,150,100,0,1.5*Math.PI,false);ctx.stroke(); // stroke and fill a circlevar 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 curvectx.beginPath();ctx.moveTo(50,200);ctx.bezierCurveTo(50,300,200,100,200,150);ctx.stroke();// now make the control points visiblectx.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 curvectx.strokeStyle = "green";ctx.lineWidth = 5;ctx.beginPath();ctx.moveTo(400,200);ctx.quadraticCurveTo(500,100,600,150);ctx.stroke();// now make the control points visiblectx.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 settingsctx.fillText(theString, 20,20);// draw the string with some font informationctx.font = "25pt Georgia"ctx.fillText(theString, 20,60);// draw the string with a fillStyle colorctx.fillStyle = "blue";ctx.fillText(theString, 20,100);// draw the string with both a stroke and a fill with some opacity settingctx.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 textvar 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 informationctx.strokeStyle = "red";ctx.fillStyle = "yellow";ctx.lineWidth = 10;// draw the first Rectanglectx.fillRect(25,25,100,125);ctx.strokeRect(25,25,100,125);// now, draw another rectangle with different settingsctx.save(); // this will save the current settingsctx.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 rectanglectx.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>