height——对应于canvas元素的height属性；
width——对应于canvas元素的width属性；
getcontext(af16c4db277e0498b5fa9e30613367f1)——为画布返回绘图上下文；
2）绘制矩形：
fillrect(x,y,w,h)——绘制一个实心矩形；
strokerect(x,y,w,h)——绘制一个空心矩形；
clearrect(x,y,w,h)——清除指定的矩形；
canvas{ border:medium double black; margin: 4px; } body > *{ float: left; }
<canvas id="canvas1" width="500" height="200"> 您的浏览器不支持<code>canvas</code>! </canvas>
<script> //绘制矩形 var ctx=document.getelementbyid("canvas1").getcontext("2d"); //ctx.fillrect(10,10,50,50); var offset=10; var size=50; var count=5; for(var i=0;i<count;i++){ ctx.fillrect(i*(offset+size)+offset,offset,size,size); ctx.strokerect(i*(offset+size)+offset,(2*offset)+size,size,size); ctx.clearrect(i*(offset+size)+offset,offset+5,size,size-10); } </script>
3）设置画布绘制状态：
linewidth——获取或设置线条的宽度（默认值为1.0）；
linejoin——获取或设置线条与图形连接时的样式（默认值为miter）;
fillstyle——获取或设置用于实心图形的样式（默认值为black）;
strokestyle——获取或设置用于线条的样式（默认值为black）;
<canvas id="canvas2" width="500" height="70"> 您的浏览器不支持<code>canvas</code>! </canvas>
<script> //在执行操作前绘制设置状态 var ctx=document.getelementbyid("canvas2").getcontext("2d"); ctx.linewidth=2; ctx.strokerect(10,10,50,50); ctx.linewidth=4; ctx.strokerect(70,10,50,50); ctx.linewidth=6; ctx.strokerect(130,10,50,50); ctx.linewidth=8; ctx.strokerect(200,10,50,50); </script>
<canvas id="canvas3" width="500" height="140"> 您的浏览器不支持<code>canvas</code>! </canvas>
<script> //设置linejoin属性 var ctx=document.getelementbyid("canvas3").getcontext("2d"); ctx.linewidth=20; ctx.linejoin="round"; ctx.strokerect(20,20,100,100); ctx.linejoin="bevel"; ctx.strokerect(160,20,100,100); ctx.linejoin="miter"; ctx.strokerect(300,20,100,100); </script>
<canvas id="canvas4" width="500" height="140"> 您的浏览器不支持<code>canvas</code>! </canvas>
<script> //设置填充和笔触样式 var ctx=document.getelementbyid("canvas4").getcontext("2d"); var offset=10; var size=50; var count=5; var linewidth=3; var fillcolors=["black","grey","lightgrey","red","blue"]; var strokecolors=["rgb(0,0,0)","rgb(100,100,100)","rgb(200,200,200)","rgb(255,0,0)","rgb(0,0,255)"]; for(var i=0;i<count;i++){ ctx.fillstyle=fillcolors[i]; ctx.strokestyle=strokecolors[i]; ctx.fillrect(i*(offset+size)+offset,offset,size,size); ctx.strokerect(i*(offset+size)+offset,(2*offset)+size,size,size); } </script>
4）使用渐变
createlineargradient(x0,y0,x1,y1)——创建线性渐变，返回canvasgradient对象；
createradialgradient(x0,y0,r0,x1,y1,r1)——创建径向渐变，返回canvasgradient对象；
canvasgradient对象的方法：
addcolorstop(<position>,<color>)——给渐变的梯度线添加一种纯色；
<canvas id="canvas5" width="500" height="140"> 您的浏览器不支持<code>canvas</code>! </canvas>
<script> //使用线性渐变 var ctx=document.getelementbyid("canvas5").getcontext("2d"); //var grad=ctx.createlineargradient(0,0,500,140); var grad=ctx.createlineargradient(10,10,60,60); grad.addcolorstop(0,"red"); grad.addcolorstop(0.5,"white"); grad.addcolorstop(1,"black"); ctx.fillstyle=grad; //ctx.fillrect(0,0,500,140); ctx.fillrect(10,10,50,50); </script>
<canvas id="canvas6" width="500" height="140"> 您的浏览器不支持<code>canvas</code>! </canvas>
<script> //使用径向渐变 var ctx=document.getelementbyid("canvas6").getcontext("2d"); var grad=ctx.createradialgradient(250,70,20,200,60,100); grad.addcolorstop(0,"red"); grad.addcolorstop(0.5,"white"); grad.addcolorstop(1,"black"); ctx.fillstyle=grad; ctx.fillrect(0,0,500,140); </script>
<canvas id="canvas7" width="500" height="140"> 您的浏览器不支持<code>canvas</code>! </canvas>
<script> //使用较小的图形和径向渐变 var ctx=document.getelementbyid("canvas7").getcontext("2d"); var grad=ctx.createradialgradient(250,70,20,200,60,100); grad.addcolorstop(0,"red"); grad.addcolorstop(0.5,"white"); grad.addcolorstop(1,"black"); ctx.fillstyle=grad; ctx.fillrect(150,20,75,50); ctx.linewidth=8; ctx.strokestyle=grad; ctx.strokerect(250,20,75,50); </script>
5）使用图案
createpattern(<imgelement>,int2)——创建图案，指定图案文件的来源和重复方式；
int2的值是指定重复样式：分别有repeat、repeat-x、repeat-y、no-repeat;
<canvas id="canvas8" width="500" height="150"> 您的浏览器不支持<code>canvas</code>! </canvas> <img id="banana" hidden src="images/banana-small.png"/>
<script> //使用图像类的图案 var ctx=document.getelementbyid("canvas8").getcontext("2d"); var imageelem=document.getelementbyid("banana"); var pattern=ctx.createpattern(imageelem,"repeat"); ctx.fillstyle=pattern; ctx.fillrect(0,0,500,148); </script>
6)保存和恢复状态
save()——保存绘制状态属性的值，并把它们推入状态栈；
restore()——取出状态栈的第一组值，用它们来设置绘制状态；
<canvas id="canvas9" width="500" height="150" preload="auto"> 您的浏览器不支持<code>canvas</code>! </canvas> <p> <button>save</button> <button>restore</button> </p>
<script> //保存和恢复状态 var ctx=document.getelementbyid("canvas9").getcontext("2d"); var grad=ctx.createlineargradient(500,0,500,140); grad.addcolorstop(0,"red"); grad.addcolorstop(0.5,"white"); grad.addcolorstop(1,"black"); var colors=["black",grad,"red","green","yellow","black","grey"]; var cindex=0; ctx.fillstyle=colors[cindex]; draw(); var buttons=document.getelementsbytagname("button"); for(var i=0;i<buttons.length;i++){ buttons[i].onclick=handlebuttonpress; } function handlebuttonpress(e){ switch(e.target.innerhtml){ case 'save': ctx.save(); cindex=(cindex+1)%colors.length; ctx.fillstyle=colors[cindex]; draw(); break; case 'restore': cindex=math.max(0,cindex-1); ctx.restore(); draw(); break; } } function draw(){ ctx.fillrect(0,0,500,140); } </script>
7）绘制图像
drawimage方法——在画布上绘制图像，指定一个img、canvas或video元素作为来源；
<canvas id="canvas10" width="500" height="150" preload="auto"> 您的浏览器不支持<code>canvas</code>! </canvas> <img id="banana2" hidden src="images/banana-small.png"/>
<script> //使用drawimage方法 var ctx2=document.getelementbyid("canvas10").getcontext("2d"); var imageelement=document.getelementbyid("banana2"); ctx2.drawimage(imageelement,10,10); ctx2.drawimage(imageelement,120,10,100,120); ctx2.drawimage(imageelement,20,20,100,50,250,10,100,120); </script>
<video id="vid" src="raw/timessquare.webm" controls preload="auto" width="360" height="240"> 您的浏览器不支持； </video> <canvas id="canvas11" width="360" height="240"> 您的浏览器不支持； </canvas> <p> <button id="pressme">snapshot</button> <button id="pressme2">pressme</button> </p> <canvas id="canvas12" width="360" height="240"> 您的浏览器不支持； </canvas>
<script> //使用视频作为drawimage方法的来源 var ctx3=document.getelementbyid("canvas11").getcontext("2d"); var imageelement3=document.getelementbyid("vid"); document.getelementbyid("pressme").onclick=function(e){ ctx3.drawimage(imageelement3,0,0,360,240); } var width=100; var height=10; ctx3.linewidth=5; ctx3.strokestyle="red"; setinterval(function(){ ctx3.drawimage(imageelement3,0,0,360,240); ctx3.strokerect(180-(width/2),120-(height/2),width,height); },25); setinterval(function(){ width=(width-1)%200; height=(height+3)%200; },100); </script> <script> //将画布作为drawimage方法的来源 var srccanvaselement=document.getelementbyid("canvas11"); var ctx4=srccanvaselement.getcontext("2d"); var ctx5=document.getelementbyid("canvas12").getcontext("2d"); var imageelement4=document.getelementbyid("vid"); document.getelementbyid("pressme2").onclick=takesnapshot; var width=100; var height=10; ctx4.linewidth=5; ctx4.strokestyle="red"; ctx5.linewidth=30; ctx5.strokestyle="black"; setinterval(function(){ ctx4.drawimage(imageelement4,0,0,360,240); ctx4.strokerect(180-(width/2),120-(height/2),width,height); },25); setinterval(function(){ width=(width+1)%200; height=(height+3)%200; },100); function takesnapshot(){ ctx5.drawimage(srccanvaselement,0,0,360,240); ctx5.strokerect(0,0,360,240); } </script>
以上就是html5之canvas起步的代码示例详解（图）的详细内容。