html5的canvas的基础知识（ie9+）

来源：互联网发布：linux trap 编辑：程序博客网时间：2024/05/19 01:10
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas的使用</title><!--[if lt IE 9]>  <script type="text/javascript" src="html5shiv.min.js"></script>  <link rel="stylesheet" type="text/css" href="ie-css3.htc"><![endif]--> <style type="text/css">canvas{background-color:#ff0;}</style></head><body><dl><dt>创建画布</dt><dd>一般都会加一个id</dd></dl><canvas id="canvas1" style="width: 40px;height: 40px; border: 1px solid #000"></canvas><dl><dt>矩形</dt><dd>支持ie9+</dd></dl><canvas id="rectC"></canvas><script type="text/javascript">var c=document.getElementById('rectC');var ctx=c.getContext("2d");ctx.fillStyle="#00f";ctx.fillRect(0,0,140,75);</script><dl><dt>路径</dt><dd><ol><li>moveTo(x,y)起点</li><li>lineTo(x,y)终点</li></ol></dd></dl><canvas id="lineC"></canvas><script type="text/javascript">var lineC=document.getElementById('lineC');var ctx=lineC.getContext("2d");ctx.moveTo(0,0);ctx.lineTo(100,100);ctx.stroke();</script><dl><dt>圆形</dt><dd><ol><li>arc(x,y,r,start,stop)</li></ol></dd></dl><canvas id="circleC"></canvas><script type="text/javascript">var circleC=document.getElementById('circleC');var ctx=circleC.getContext("2d");ctx.beginPath();ctx.arc(50,50,50,0,2*Math.PI);ctx.stroke();</script><dl><dt>绘制实心的文本</dt><dd></dd></dl><canvas id="textSC"></canvas><script type="text/javascript">var textSC=document.getElementById('textSC');var ctx=textSC.getContext("2d");ctx.font='30px Arial';ctx.fillText('Hello World',10,50);</script><dl><dt>绘制空心的字体</dt><dd></dd></dl><canvas id="textKC"></canvas><script type="text/javascript">var textKC=document.getElementById('textKC');var ctx=textKC.getContext("2d");ctx.font="30px Arial";ctx.strokeText('hello world',10,50);</script><dl><dt>线性渐变</dt><dd><ol><li>createLinearGradient(x,y,x1,y1);</li><li>addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.</li></ol></dd></dl><canvas id="lineGC"></canvas><script type="text/javascript">var c=document.getElementById("lineGC");var ctx=c.getContext("2d");// Create gradientvar grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// Fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);</script><dl><dt>实现颈向/圆渐变</dt><dd>createRadialGradient(x,y,r,x1,y1,r1)</dd></dl><canvas id="circleGC"></canvas><script type="text/javascript">var circleGC=document.getElementById('circleGC');var ctx=circleGC.getContext('2d');var grd=ctx.createRadialGradient(50,50,5,90,60,100);grd.addColorStop(0,'red');grd.addColorStop(1,'white');ctx.fillStyle=grd;ctx.fillRect(50,50,180,40);</script><dl><dt>把图像放在画布上</dt><dd>drawImage(img,x,y);</dd></dl><canvas id="imgC"></canvas><img src="2.jpg" width="50" alt="" id="img"><script type="text/javascript">var imgC=document.getElementById('imgC');var ctx=imgC.getContext('2d');var img=document.getElementById('img');ctx.drawImage(img,0,0);</script></body></html>
对应的页面：
0 0