HTML5的canvas标签知之多少
运行效果的展示:
这张图的案例小Demo如何实现？
<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形 这个标签完成下面的案例
绘制出矩形
<!-- 创建一个画布的内容 --> <!-- <canvas id="myCanvasr" width="200" height="200" style="border: 12px solid red;background-color: lightblue;">你的浏览器不支持HTML5</canvas> --> <!-- @1 canvas 是二维表格 左上角的坐标(0,0) 在画布中绘制出150*75的矩形 从左上角开始 --> <canvas id="myCanvas" width="300" height="100" style="border: 2px solid lawngreen;">你的浏览器不支持HTML5</canvas> <script type="text/javascript"> // 找到<canvas>元素 var c=document.getElementById("myCanvas"); // 创建Context对象 var ctx=c.getContext("2d") // 绘制出矩形 ctx.fillStyle="#FF0000" ctx.fillRect(0,0,200,75) </script>
绘制直线的方法
<canvas id="myCanvas1" width="300" height="100" style="border: 2px solid lawngreen;">你的浏览器不支持HTML5</canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas1"); var ctx=c.getContext("2d"); // 开始的坐标 ctx.moveTo(0,0); //结束的坐标 ctx.lineTo(300,100); //绘制直线的方法 ctx.stroke(); </script>
画圆
<canvas id="myCanvas2" width="300" height="100" style="border: 2px solid lawngreen;">你的浏览器不支持HTML5</canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas2"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script>
文本的效果
<canvas id="myCanvas3" width="200" height="100" style="border: 2px solid red">你的浏览器不支持HTML5</canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas3"); var ctxs=c.getContext("2d"); ctx.font="30px Arial"; ctxs.strokeText("Hellow Canvas",10,50) // ctx.fillText("Hellow Canvas",10,50) </script>
渐变的使用
<canvas id="myCanvas4" width="200" height="100" style="border: 2px solid red">你的浏览器不支持HTML5</canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas4"); var ctx1=c.getContext("2d"); //创建渐变 var grd=ctx1.createLinearGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(0.5,"green"); grd.addColorStop(1,"white"); // 填充渐变 ctx1.fillStyle=grd; ctx1.fillRect(10,20,150,80) </script>
图像的绘制
<p>IMG SEE YOU</p> <img src="img/1.png" alt="The Scream" width="100" height="100" id="scream"> <p>Cancas</p> <canvas id="myCanvas5" width="250" height="300" style="border: 2px solid lightcoral"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas5"); var ctx1=c.getContext("2d"); var img=document.getElementById("scream"); img.onload=function(){ ctx1.drawImage(img,10,10) } </script>
svg
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg>
