前端开发HTML5_CanvasAPI

前端开发html5|前端开发者

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。所以我在网上找了一些canvans的案例。希望可以给大家一些启发。

html 代码

<script type=”text/javascript”></p><br /> <p> function draw21(id) {<br /><br /> var canvas = document.getElementById(id)<br /><br /> if (canvas == null)<br /><br /> return false;<br /><br /> var context = canvas.getContext(“2d”);<br /><br /> //实践表明在不设施fillStyle下的默认fillStyle=black<br /><br /> context.fillRect(0, 0, 100, 100);<br /><br /> //实践表明在不设施strokeStyle下的默认strokeStyle=black<br /><br /> context.strokeRect(120, 0, 100, 100);</p><br /> <p> //设置纯色<br /><br /> context.fillStyle = “red”;<br /><br /> context.strokeStyle = “blue”;</p><br /> <p> context.fillRect(0, 120, 100, 100);<br /><br /> context.strokeRect(120, 120, 100, 100);</p><br /> <p> //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明<br /><br /> context.fillStyle = “rgba(255,0,0,0.2)”;<br /><br /> context.strokeStyle = “rgba(255,0,0,0.2)”;</p><br /> <p> context.fillRect(240,0 , 100, 100);<br /><br /> context.strokeRect(240, 120, 100, 100);<br /><br /> } window.onload = function () {<br /><br /> draw21(“canvas21″);<br /><br /> }<br /><br /> </script></p><br /> <p> <section><header><h1>画矩形</h1></header><canvas id=”canvas21″ width=”400″ height=”300”></canvas></section>

html 代码

<script type=”text/javascript”><br /><br /> function draw22(id) {<br /><br /> var canvas = document.getElementById(id)<br /><br /> if (canvas == null)<br /><br /> return false;<br /><br /> var context = canvas.getContext(“2d”);<br /><br /> //实践表明在不设施fillStyle下的默认fillStyle=black<br /><br /> context.fillRect(0, 0, 100, 100);<br /><br /> context.strokeStyle = “blue”;<br /><br /> //实践表明在不设施strokeStyle下的默认strokeStyle=black<br /><br /> context.strokeRect(120, 0, 100, 100);</p><br /> <p> //设置纯色<br /><br /> context.fillStyle = “red”;<br /><br /> context.strokeStyle = “blue”;<br /><br /> context.fillRect(0, 120, 100, 100);<br /><br /> context.strokeRect(120, 120, 100, 100);</p><br /> <p> //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明<br /><br /> context.fillStyle = “rgba(255,0,0,0.2)”;<br /><br /> context.strokeStyle = “rgba(255,0,0,0.2)”;<br /><br /> context.fillRect(240, 0, 100, 100);<br /><br /> context.strokeRect(300, 120, 100, 100);<br /><br /> context.clearRect(20, 50, 100, 120);<br /><br /> }<br /><br /> window.onload = function () {<br /><br /> draw22(“canvas22″);<br /><br /> }<br /><br /> </script><br /><br /> <section><header><h1>清除矩形</h1></header><canvas id=”canvas22″ width=”400″ height=”300”></canvas></section>

html 代码

<script type=”text/javascript”><br /><br /> function draw23(id) {<br /><br /> var canvas = document.getElementById(id);<br /><br /> if (canvas == null) {<br /><br /> return false;<br /><br /> }<br /><br /> var context = canvas.getContext(‘2d’);<br /><br /> var n = 0;</p><br /> <p> //左侧1/4圆弧<br /><br /> context.beginPath();<br /><br /> context.arc(100, 150, 50, 0, Math.PI/2 , false);<br /><br /> context.fillStyle = ‘rgba(255,0,0,0.25)’;<br /><br /> context.fill();<br /><br /> context.strokeStyle = ‘rgba(255,0,0,0.25)'<br /><br /> context.closePath();<br /><br /> context.stroke();</p><br /> <p> //右侧1/4圆弧<br /><br /> context.beginPath();<br /><br /> context.arc(300, 150, 50, 0, Math.PI/2 , false);<br /><br /> context.fillStyle = ‘rgba(255,0,0,0.25)’;<br /><br /> context.fill();<br /><br /> context.strokeStyle = ‘rgba(255,0,0,0.25)’;<br /><br /> context.closePath();<br /><br /> context.stroke();<br /><br /> }<br /><br /> window.onload = function () {<br /><br /> draw23(“canvas23″);<br /><br /> }<br /><br /> </script><br /><br /> <section><header><h1>绘制路径</h1></header><canvas id=”canvas23″ width=”400″ height=”300”></canvas></section><br /><br />

html 代码

<script type=”text/javascript”><br /><br /> function draw0(id) {<br /><br /> var canvas = document.getElementById(id);<br /><br /> if (canvas == null) {<br /><br /> return false;<br /><br /> }<br /><br /> var context = canvas.getContext(‘2d’);<br /><br /> context.beginPath();<br /><br /> context.arc(200, 150, 100, 0, Math.PI * 2, true);<br /><br /> //不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果<br /><br /> context.closePath();<br /><br /> context.fillStyle = ‘rgba(0,255,0,0.25)’;<br /><br /> context.fill();<br /><br /> }<br /><br /> window.onload = function () {<br /><br /> draw0(“canvas0″);<br /><br /> }<br /><br /> </script><br /><br /> <section><header><h1>画圆()</h1></header><canvas id=”canvas0″ width=”400″ height=”300”></canvas></section>

html 代码

<script type=”text/javascript”><br /><br /> function draw8(id) {<br /><br /> var canvas = document.getElementById(id);<br /><br /> if (canvas == null)<br /><br /> return false;<br /><br /> var context = canvas.getContext(“2d”);<br /><br /> //context.beginPath();<br /><br /> context.strokeStyle = “rgb(250,0,0)”;<br /><br /> context.fillStyle = “rgb(250,0,0)”<br /><br /> //实验证明第一次lineTo的时候和moveTo功能一样<br /><br /> context.lineTo(0, 0);<br /><br /> //之后的lineTo会以上次lineTo的节点为开始<br /><br /> context.lineTo(30,50);</p><br /> <p> context.lineTo(0, 0);<br /><br /> context.moveTo(30, 50);<br /><br /> context.lineTo(200,50);<br /><br /> context.stroke();<br /><br /> }</p><br /> <p> window.onload = function () {<br /><br /> draw8(“canvas8″);<br /><br /> }<br /><br /> </script><br /><br /> <section><header><h1>画线test(lineTo moveTo)</h1></header><canvas id=”canvas8″ width=”400″ height=”300”></canvas></section>

html 代码

<script type=”text/javascript”><br /><br /> function draw1(id) {<br /><br /> var canvas = document.getElementById(id);<br /><br /> if (canvas == null)<br /><br /> return false;<br /><br /> var context = canvas.getContext(“2d”);<br /><br /> context.fillStyle = “#EEEEFF”;<br /><br /> context.fillRect(0, 0, 400, 300);<br /><br /> var n = 0;<br /><br /> var dx = 150;<br /><br /> var dy = 150;<br /><br /> var s = 100;<br /><br /> context.beginPath();<br /><br /> context.fillStyle = ‘rgb(100,255,100)’;<br /><br /> context.strokeStyle = ‘rgb(0,0,100)’;<br /><br /> var x = Math.sin(0);<br /><br /> var y = Math.cos(0);<br /><br /> var dig = Math.PI / 15 *21;</p><br /> <p> for (var i = 0; i < 30; i++) {<br /><br /> var x = Math.sin(i * dig);<br /><br /> var y = Math.cos(i * dig);<br /><br /> context.lineTo(dx + x * s, dy + y * s);<br /><br /> }<br /><br /> context.closePath();<br /><br /> context.fill();<br /><br /> context.stroke();</p><br /> <p> }</p><br /> <p> window.onload = function () {<br /><br /> draw1(“canvas1″);<br /><br /> }<br /><br /> </script><br /><br /> <section><header><h1>画线demo(lineTo moveTo)</h1></header><canvas id=”canvas1″ width=”400″ height=”300”></canvas></section>

html 代码

<script type=”text/javascript”><br /><br /> function draw2(id) {<br /><br /> var canvas = document.getElementById(id);<br /><br /> if (canvas == null) {<br /><br /> return false;<br /><br /> }<br /><br /> var context = canvas.getContext(“2d”);<br /><br /> context.fillStyle = “#EEEFF”;<br /><br /> context.fillRect(0, 0, 400, 300);<br /><br /> var n = 0;<br /><br /> var dx = 150;<br /><br /> var dy = 150;<br /><br /> var s = 100;<br /><br /> context.beginPath();<br /><br /> context.globalCompositeOperation = ‘and’;<br /><br /> context.fillStyle = ‘rgb(100,255,100)’;<br /><br /> var x = Math.sin(0);<br /><br /> var y = Math.cos(0);<br /><br /> var dig = Math.PI / 15 * 13;<br /><br /> context.moveTo(dx, dy);<br /><br /> for (var i = 0; i < 30; i++) {<br /><br /> var x = Math.sin(i * dig);<br /><br /> var y = Math.cos(i * dig);<br /><br /> context.bezierCurveTo(dx + x * s, dy + y * s – 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s);<br /><br /> }<br /><br /> context.closePath();<br /><br /> context.fill();<br /><br /> context.stroke();<br /><br /> }</p><br /> <p> function draw24(id) {<br /><br /> var canvas = document.getElementById(id);<br /><br /> if (canvas == null) {<br /><br /> return false;<br /><br /> }<br /><br /> var context = canvas.getContext(“2d”);</p><br /> <p> context.moveTo(50, 50);<br /><br /> context.bezierCurveTo(50, 50,150, 50, 150, 150);<br /><br /> context.stroke();<br /><br /> context.quadraticCurveTo(150, 250, 250, 250);<br /><br /> context.stroke();<br /><br /> }</p><br /> <p> window.onload = function () {<br /><br /> draw24(“canvas24”);<br /><br /> draw2(“canvas2″);<br /><br /> }<br /><br /> </script><br /><br /> <section><header><h1>贝塞尔曲线test（bezierCurveTo）</h1></header><canvas id=”canvas24″ width=”400″ height=”300″></canvas></section><br /><br /> <section><header><h1>贝塞尔曲线demo（bezierCurveTo）</h1></header><canvas id=”canvas2″ width=”400″ height=”300”></canvas></section>

html 代码

<script type=”text/javascript”><br /><br /> function draw25(id) {<br /><br /> var canvas = document.getElementById(id);<br /><br /> if (canvas == null)<br /><br /> return false;<br /><br /> var context = canvas.getContext(‘2d’);<br /><br /> var g1 = context.createLinearGradient(0, 0, 200, 300);</p><br /> <p> g1.addColorStop(0, ‘rgb(255,0,0)’); //红<br /><br /> g1.addColorStop(0.5, ‘rgb(0,255,0)’);//绿<br /><br /> g1.addColorStop(1, ‘rgb(0,0,255)’); //蓝</p><br /> <p> //可以把lg对象理解成GDI中线性brush<br /><br /> context.fillStyle = g1;<br /><br /> //再用这个brush来画正方形<br /><br /> context.fillRect(0, 0, 400, 300);<br /><br /> }</p><br /> <p> function draw3(id) {<br /><br /> var canvas = document.getElementById(id);<br /><br /> if (canvas == null)<br /><br /> return false;<br /><br /> var context = canvas.getContext(‘2d’);<br /><br /> var g1 = context.createLinearGradient(0, 0, 0, 300);<br /><br /> g1.addColorStop(0,’rgb(255,255,0)’);//浅绿<br /><br /> g1.addColorStop(1,’rgb(0,255,255)’);//浅蓝<br /><br /> context.fillStyle = g1;<br /><br /> context.fillRect(0, 0, 400, 300);</p><br /> <p> var n = 0;<br /><br /> var g2 = context.createLinearGradient(0, 0, 300, 0);<br /><br /> g2.addColorStop(0, ‘rgba(0,0,255,0.5)’);//蓝色<br /><br /> g2.addColorStop(1, ‘rgba(255,0,0,0.5)’);//红色<br /><br /> for (var i = 0; i < 8; i++) {<br /><br /> context.beginPath();<br /><br /> context.fillStyle = g2;<br /><br /> context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);<br /><br /> context.closePath();<br /><br /> context.fill();<br /><br /> }<br /><br /> }</p><br /> <p> window.onload = function () {<br /><br /> draw25(“canvas25”);<br /><br /> draw3(“canvas3″);<br /><br /> }<br /><br /> </script><br /><br /> <section><header><h1>线性test（createLinearGradient addColorStop）</h1></header><canvas id=”canvas25″ width=”400″ height=”300″></canvas></section><br /><br /> <section><header><h1>线性demo（createLinearGradient addColorStop）</h1></header><canvas id=”canvas3″ width=”400″ height=”300”></canvas></section>

html 代码

<script type=”text/javascript”><br /><br /> function draw5(id) {<br /><br /> var canvas = document.getElementById(id);<br /><br /> if (canvas == null)<br /><br /> return false;</p><br /> <p> var context = canvas.getContext(“2d”);<br /><br /> context.save(); //保存了当前context的状态<br /><br /> context.fillStyle = “#EEEEFF”;<br /><br /> context.fillRect(0, 0, 400, 300);</p><br /> <p> context.fillStyle = “rgba(255,0,0,0.1)”;<br /><br /> //平移 缩放 旋转 1 2 3<br /><br /> context.translate(100, 100);<br /><br /> context.scale(0.5, 0.5);<br /><br /> context.rotate(Math.PI / 4);<br /><br /> context.fillRect(0, 0, 100, 100);</p><br /> <p> context.restore(); //恢复到刚刚保存的状态,保存恢复只能使用一次<br /><br /> context.save(); //保存了当前context的状态<br /><br /> context.fillStyle = “rgba(255,0,0,0.2)”;<br /><br /> //平移 旋转 缩放 1 3 2<br /><br /> context.translate(100, 100);<br /><br /> context.rotate(Math.PI / 4);<br /><br /> context.scale(0.5, 0.5);<br /><br /> context.fillRect(0, 0, 100, 100);</p><br /> <p> context.restore(); //恢复到刚刚保存的状态<br /><br /> context.save(); //保存了当前context的状态<br /><br /> context.fillStyle = “rgba(255,0,0,0.3)”;<br /><br /> //缩放 平移 旋转 2 1 3<br /><br /> context.scale(0.5, 0.5);<br /><br /> context.translate(100, 100);<br /><br /> context.rotate(Math.PI / 4);<br /><br /> context.fillRect(0, 0, 100, 100);</p><br /> <p> context.restore(); //恢复到刚刚保存的状态<br /><br /> context.save(); //保存了当前context的状态<br /><br /> context.fillStyle = “rgba(255,0,0,0.4)”;<br /><br /> //缩放 旋转 平移 2 3 1<br /><br /> context.scale(0.5, 0.5);<br /><br /> context.rotate(Math.PI / 4);<br /><br /> context.translate(100, 100);<br /><br /> context.fillRect(0, 0, 100, 100);</p><br /> <p> context.restore(); //恢复到刚刚保存的状态<br /><br /> context.save(); //保存了当前context的状态<br /><br /> context.fillStyle = “rgba(255,0,0,0.5)”;<br /><br /> //旋转 平移 缩放 3 1 2<br /><br /> context.rotate(Math.PI / 4);<br /><br /> context.translate(100, 100);<br /><br /> context.scale(0.5, 0.5);<br /><br /> context.fillRect(0, 0, 100, 100);</p><br /> <p> context.restore(); //恢复到刚刚保存的状态<br /><br /> context.save(); //保存了当前context的状态<br /><br /> context.fillStyle = “rgba(255,0,0,1)”;<br /><br /> //旋转 缩放 平移 3 2 1<br /><br /> context.rotate(Math.PI / 4);<br /><br /> context.scale(0.5, 0.5);<br /><br /> context.translate(100, 100);<br /><br /> context.fillRect(0, 0, 100, 100);</p><br /> <p> //实验表明应该移动的是坐标轴<br /><br /> //实验表明缩放的是坐标轴比例<br /><br /> //实验表明旋转的是坐标轴<br /><br /> //综合上述，因此平移 缩放 旋转 三者的顺序不同都将画出不同的结果<br /><br /> }</p><br /> <p> function draw6(id) {<br /><br /> var canvas = document.getElementById(id);<br /><br /> if (canvas == null)<br /><br /> return false;<br /><br /> var context = canvas.getContext(‘2d’);<br /><br /> context.fillStyle = “#EEEEFF”;<br /><br /> context.fillRect(0, 0, 400, 300);<br /><br /> //图形绘制<br /><br /> context.translate(200, 50);<br /><br /> context.fillStyle = ‘rgba(255,0,0,0.25)’;</p><br /> <p> for (var i = 0; i < 50; i++) {<br /><br /> //实验表明translate、scale、rotate都是在原有的context属性上调整的<br /><br /> context.translate(25, 25);<br /><br /> context.scale(0.95, 0.95);<br /><br /> context.rotate(Math.PI / 10);<br /><br /> context.fillRect(0, 0, 100, 50);<br /><br /> }<br /><br /> }</p><br /> <p> window.onload = function () {<br /><br /> draw5(“canvas5”);<br /><br /> draw6(“canvas6″);<br /><br /> }<br /><br /> </script><br /><br /> <section><header><h1>平移 test（translate）缩放（scale） 旋转（rotate）</h1></header><canvas id=”canvas5″ width=”400″ height=”300″></canvas></section><br /><br /> <section><header><h1>平移 demo（translate）缩放（scale） 旋转（rotate）</h1></header><canvas id=”canvas6″ width=”400″ height=”300”></canvas></section>

html 代码

<script type=”text/javascript”><br /><br /> function draw7(id) {<br /><br /> var canvas = document.getElementById(id);<br /><br /> var context = canvas.getContext(“2d”);</p><br /> <p> context.fillStyle = “#EEEEFF”;<br /><br /> context.fillRect(0, 0, 400, 300);<br /><br /> //图形绘制<br /><br /> context.translate(200, 50);<br /><br /> for (var i = 0; i < 50; i++) {<br /><br /> context.translate(25, 25);<br /><br /> context.scale(0.95, 0.95);<br /><br /> context.rotate(Math.PI / 10);<br /><br /> create5Star(context);<br /><br /> context.fill();<br /><br /> }</p><br /> <p> }</p><br /> <p> function draw9(id) {<br /><br /> var canvas = document.getElementById(id);<br /><br /> if (canvas == null)<br /><br /> return false;<br /><br /> var context = canvas.getContext(“2d”);<br /><br /> //定义颜色<br /><br /> var colors = [“red”, “orange”, “yellow”, “green”, “blue”, “navy”, “perple”];<br /><br /> //定义线宽<br /><br /> context.lineWidth = 10;<br /><br /> context.transform(1,0,0,1,100,0)<br /><br /> //循环绘制圆弧<br /><br /> for (var i = 0; i < colors.length; i++) {<br /><br /> //定义每次向下移动10个像素的变换矩阵<br /><br /> context.transform(1, 0, 0, 1, 0, 10);<br /><br /> //设定颜色<br /><br /> context.strokeStyle = colors[i];<br /><br /> context.beginPath();<br /><br /> context.arc(50, 100, 100, 0, Math.PI, true);<br /><br /> context.stroke();<br /><br /> }<br /><br /> }<br /><br /> function draw10(id) {<br /><br /> var canvas = document.getElementById(id);<br /><br /> if (canvas == null) {<br /><br /> return false;<br /><br /> }<br /><br /> var context = canvas.getContext(“2d”);<br /><br /> var oprtns = new Array(<br /><br /> “source-over”,<br /><br /> “destination-over”,<br /><br /> “source-in”,<br /><br /> “destination-in”,<br /><br /> “source-out”,<br /><br /> “destination-out”,<br /><br /> “source-atop”,<br /><br /> “destination-atop”,<br /><br /> “lighter”,<br /><br /> “xor”,<br /><br /> “copy”<br /><br /> );<br /><br /> var i = 0;//组合效果编号</p><br /> <p> //结合setinterval动态显示组合<br /><br /> var interal = setInterval(function () {<br /><br /> if (i == 10) {<br /><br /> i=0;<br /><br /> }<br /><br /> else {<br /><br /> i++;<br /><br /> }<br /><br /> //每次重绘前清空<br /><br /> context.clearRect(0,0,400,300)<br /><br /> //蓝色矩形<br /><br /> context.fillStyle = “blue”;<br /><br /> context.fillRect(10, 10, 60, 60);<br /><br /> //设置组合方式<br /><br /> context.globalCompositeOperation = oprtns[i];<br /><br /> //设置新图形（红色圆形）<br /><br /> context.beginPath();<br /><br /> context.fillStyle = “red”;<br /><br /> context.arc(60, 60, 30, 0, Math.PI * 2, false);<br /><br /> context.fill();<br /><br /> }, 1000);</p><br /> <p> }</p><br /> <p> function create5Star(context) {<br /><br /> var n = 0;<br /><br /> var dx = 100;<br /><br /> var dy = 0;</p><br /> <p> var s = 50;<br /><br /> //创建路径<br /><br /> context.beginPath();<br /><br /> context.fillStyle = ‘rgba(255,0,0,0.5)’;<br /><br /> var x = Math.sin(0);<br /><br /> var y = Math.cos(0);<br /><br /> var dig = Math.PI / 5 * 4;<br /><br /> for (var i = 0; i < 5; i++) {<br /><br /> var x = Math.sin(i * dig);<br /><br /> var y = Math.cos(i * dig);<br /><br /> context.lineTo(dx + x * s, dy + y * s);</p><br /> <p> }<br /><br /> context.closePath();</p><br /> <p> }</p><br /> <p> window.onload = function () {<br /><br /> draw7(“canvas7”);<br /><br /> draw9(“canvas9”);<br /><br /> draw10(“canvas10″);<br /><br /> }<br /><br /> </script><br /><br /> <section><header><h1>坐标与路径的结合使用</h1></header><canvas id=”canvas7″ width=”400″ height=”300″></canvas></section><br /><br /> <section><header><h1>矩阵变换</h1></header><canvas id=”canvas9″ width=”400″ height=”300″></canvas></section></p><br /> <p> <section><header><h1>图形组合叠加(globalCompositeOperation)</h1></header><canvas id=”canvas10″ width=”400″ height=”300”></canvas></section>

前端开发html5|网站前端开发

https://www.rokub.com

本文来自：前端开发者 » 《前端开发HTML5_CanvasAPI》

如转载，请注明本文链接: https://www.rokub.com/2931.html