HTML5 canvas画布（三）

本节主要是canvas各种用法的示例，先解决一个我在应用canvas绘图过程中的一个问题，相信大家可能也遇到过。

一个奇怪的问题

下面代码是在canvas上绘制一个100*100的矩形：

<script> window.onload = function(){ var canvas = document.getelementbyid("mycanvas1"); var context = canvas.getcontext("2d"); //设置矩形填充颜色为红色 context.fillstyle = "red"; //从(10，10)位置绘制100*100的正方形 context.fillrect(10,10,100,100); }; </script>你的不支持canvas。

运行结果如下：

咦？奇怪，我们明明画的是正方形啊，怎么变长方形了？检查代码，也没有问题呀！
我们尝试改下代码吧！去掉样式中的width和height属性：

<script> window.onload = function(){ var canvas = document.getelementbyid("mycanvas1"); var context = canvas.getcontext("2d"); //设置矩形填充颜色为红色 context.fillstyle = "red"; //从10，10位置绘制100*100的正方形 context.fillrect(10,10,100,100); }; </script> 你的浏览器不支持canvas。

再看运行结果：

正常了！
比较下两份代码的区别，第二份只是在样式中去掉了width和height属性喎? f/ware/vc/"="" target="_blank" class="keylink">vc3ryb25npqosxutl+9k7xkpsu9h5oam8l3a+dqo8cd6688c0vq25/blp1mtxyshpt6lp1qosy2fudmfzxkziz7utsry089chzqozmdbwecoxntbwekosz+c1sdpa0rvvxc28xqyho7b4y3nzyejww7xed2lkdgi6zwhlawdodmr00nsjrntyz+c1sdpatttv4txfzbzgrl340ndarcnstkba7agjpc9wpg0kpha+1elr+c7sw8eyu8trt6lp1qo6tdrsu9xfzbzg5mq1yse9q7xatv7vxc28mzawchgqmtuwchi9+ndqwk3j7m6qmjawchgqmjawchi687xeveg5+6gjpc9wpg0kpha+xmfdtmjnus7v/ci3yejww2nhbnzhc7utsry1xltz0kgjrlb4sru1vnbczbzp8bhk0m7e2ko/pgjyic8+dqrt0mg91ta3vbeoo7o8l3a+dqo8chjlignsyxnzpq=="brush:java;"> //第一种:在html标签中静态设置 //第二种:使用js代码动态设置 var canvas = document.getelementbyid("mycanvas1"); var canvas.width = 200; var canvas.height = 200;

绘制路径

<script> var canvaswidth; var canvasheight; //获取canvas的宽和高存放于全局变量备用，并返回canvas的context对象 function getcontextbyid(elementid){ var canvas = document.getelementbyid(elementid); canvaswidth = canvas.width; canvasheight = canvas.height; var context = canvas.getcontext("2d"); return context; } function drawpath(){ var context = getcontextbyid("mycanvas"); //清除画布 context.clearrect(0,0,canvaswidth,canvasheight); context.beginpath(); /*绘制弧线，使用arc(x,y,radius,startangle,endangle,counterclockwise)方法 以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startangle 和endangle。最后一个参数表示是否按逆时针方向计算，值为false表示顺时针方向计算。 */ context.arc(130,130,90,0,2*math.pi,false); /*arcto(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给 定的半径radius穿过(x1,y1) */ context.arcto(310,220,400,130,80) /*beziercurveto(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到（x,y）为 止，并且以(c1x,c1y)和(c2x,c2y)为控制的。 */ context.beziercurveto(320,210,400,250,310,300); /*lineto(x,y):从上一点开始绘制一条直线，到(x,y)为止*/ context.lineto(0,300); context.moveto(130,220); context.lineto(100,300); /*quadraticcurveto(cx,cy,x,y):从上一点开始绘制一条二次曲线，到(x,y)为止，并且 以(cx,cy)作为控制点 */ context.quadraticcurveto(40,380,130,400); context.lineto(450,400); /*rect(x,y,width,height):从点（x,y）开始绘制一个矩形路径*/ context.rect(80,80,100,100) context.strokestyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); } </script> 你的浏览器不支持canvas。

绘制

运行效果：

绘制文本

<script> var canvaswidth = 300; var canvasheight = 300; //获取canvas的宽和高存放于全局变量备用，并返回canvas的context对象 function getcontextbyid(elementid){ var canvas = document.getelementbyid(elementid); canvaswidth = canvas.width; canvasheight = canvas.height; var context = canvas.getcontext("2d"); return context; } function drawtext(){ var context = getcontextbyid("mycanvas"); //清除画布 context.clearrect(0,0,canvaswidth,canvasheight); //开始路径 context.beginpath(); //绘制外圆 context.arc(100,100,99,0,2*math.pi,false); //绘制内圆 //context.moveto(194,100);//将绘图游标移动到（x,y），不画线 context.arc(100,100,94,0,2*math.pi,false); //绘制分针 context.moveto(100,100); context.lineto(100,15); //绘制时针 context.moveto(100,100); context.lineto(35,100); context.strokestyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); //绘制文本 context.font="bold 14px arial"; context.textalign="center"; context.textbaseline="middle";//文本的基线 context.filltext("3",200-15,100); context.filltext("6",100,200-15); context.filltext("9",15,100); context.filltext("12",100,15); context.strokestyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); } </script> 你的浏览器不支持canvas。

绘制

运行效果如下：

转换

<script> var canvaswidth = 300; var canvasheight = 300; //获取canvas的宽和高存放于全局变量备用，并返回canvas的context对象 function getcontextbyid(elementid){ var canvas = document.getelementbyid(elementid); canvaswidth = canvas.width; canvasheight = canvas.height; var context = canvas.getcontext("2d"); return context; } function drawtext(){ var context = getcontextbyid("mycanvas"); //清除画布 context.clearrect(0,0,canvaswidth,canvasheight); //开始路径 context.beginpath(); //绘制外圆 context.arc(100,100,99,0,2*math.pi,false); //绘制内圆 //context.moveto(194,100);//将绘图游标移动到（x,y），不画线 context.arc(100,100,94,0,2*math.pi,false); //绘制文本 context.font="bold 14px arial"; context.textalign="center"; context.textbaseline="middle";//文本的基线 context.filltext("3",200-15,100); context.filltext("6",100,200-15); context.filltext("9",15,100); context.filltext("12",100,15); context.strokestyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); //变换原点，将圆心变换为画布坐标原点 /*translate(x,y):将坐标原点移动到（x,y）。执行这个变换后，坐标(0,0)会变成之 前由(x,y)表示的点 */ context.translate(100,100); //旋转1个弧度 context.rotate(1); //绘制分针 context.moveto(0,0); context.lineto(0,-85); //绘制时针 context.moveto(0,0); context.lineto(-65,0); context.strokestyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); //将原点恢复到原画布原点 context.translate(-100,-100); } </script> 你的浏览器不支持canvas。

绘制

运行效果：

阴影

a drawing of something <script> var drawing=document.getelementbyid("mycanvas"); //确定浏览器支持元素 if(drawing.getcontext){ //取得绘图上下文对象的引用，“2d”是取得2d上下文对象 var context=drawing.getcontext("2d"); //设置阴影 context.shadowcolor="rgba(0,0,0,0.5)"//设置阴影颜色 context.shadowoffsetx=15;//设置形状或路径x轴方向的阴影偏移量，默认值为0； context.shadowoffsety=15;//设置形状或路径y轴方向的阴影偏移量，默认值为0； context.shadowblur=10;//设置模糊的像素数，默认值为0，即不模糊。 //绘制红色填充矩形 context.fillstyle="red"; context.fillrect(10,10,100,100); //绘制半透明的蓝色矩形 context.fillstyle="rgba(0,0,255,1)"; context.fillrect(60,60,100,100); } </script>

 

 

喎?>