专栏首页水击三千浅谈JavaScript的Canvas(绘制图形)

浅谈JavaScript的Canvas(绘制图形)

  HTML5中新增加的一个元素canvas,要使用canvas元素,浏览器必须支持html5。通过canvas标签来创建元素,并需要为canvas指定宽度和高度,也就是绘图区域的大小。 <canvas id="mycanvas" style="width:500px;height:500px;"></canvas> 。要在canvas上画图,需要取得canvas的上下文,通过getContext方法来获取上下文。 var context=canvas.getContext("2d"); 在使用getContext方法之前,需要判断浏览器是否支持该方法。

  使用画布的toDataURL方法,可以将canvas转为图片格式。这个方法接收一个参数,即图片的MIME类型格式。如果要取得画布中一个png格式的图片,可以使用以下的代码:

1  var url=canvas.toDataURL("image/png");
2         var img=document.createElement("img");
3         img.src=url;
  • 填充和描边

  2d上下文的两种基本操作就是填充和描边。填充就是用指定的颜色、渐变色、图像填充图形,描边在图形的边缘画线。大多数上下文操作都需要填充和描边操作,这两个操作的属性取决于strokeStyle和fillStyle。

1 var canvas=document.getElementById("mycanvas");
2         if(canvas.getContext){
3             var context=canvas.getContext("2d");
4             context.strokeStyle="#000099";
5             context.fillStyle="#0099FF";
6             
7         }

  上面的代码为上下文的两种属性strokeStyle和fillStyle指定了颜色值。可以使用CSS中指定颜色值的任何格式,包括颜色名、十六进制编码、rgb、rgba、hsl和hsla。

  • 绘制矩形

  矩形是一个可以直接在2d上下文中绘制的图形。与矩形有关的方法包括fillRect、strokeRect和clearRect方法。这三个方法接收4个参数,矩形的x坐标、矩形的y坐标、矩形的长度、矩形的宽度。参数的单位是像素。

 1 var canvas=document.getElementById("mycanvas");
 2         if(canvas.getContext){
 3             var context=canvas.getContext("2d");
 4             context.strokeStyle="#000099";
 5             context.fillStyle="#0099FF";
 6             context.fillRect(10,10,50,50);
 7             //context.strokeRect(0,0,200,200);
 8             //downloadFile('ship.png', canvas.toDataURL("image/png"));
 9             
10         }

  通过上面的代码可以绘制一个矩形,从10,10处开始绘制,矩形的长和高都是50px。

 1 var canvas=document.getElementById("mycanvas");
 2         if(canvas.getContext){
 3             var context=canvas.getContext("2d");
 4             context.strokeStyle="rgba(0,0,255,0.5)";
 5             context.fillStyle="red";
 6             context.fillRect(10,10,50,50);
 7             context.fillStyle="rgba(0,0,255,0.5)";
 8             context.fillRect(30,30,50,50);
 9             //context.strokeRect(0,0,200,200);
10             //downloadFile('ship.png', canvas.toDataURL("image/png"));
11             
12         }

  通过指定fillStyle为rgba格式,可以绘制半透明的矩形。上面的代码创建了两个矩形,其中一个为半透明颜色。

  通过clearRect可以清除画布上面的图形。需要传入x坐标,y坐标,长度和高度。

 1 var canvas=document.getElementById("mycanvas");
 2         if(canvas.getContext){
 3             var context=canvas.getContext("2d");
 4             context.strokeStyle="rgba(0,0,255,0.5)";
 5             context.fillStyle="red";
 6             context.fillRect(10,10,50,50);
 7             context.fillStyle="rgba(0,0,255,0.5)";
 8             context.fillRect(30,30,50,50);
 9             context.clearRect(0,0,50,50);
10             //context.strokeRect(0,0,200,200);
11             //downloadFile('ship.png', canvas.toDataURL("image/png"));
12             
13         }

  上面的代码使用clearRect方法清除画布上的图形,从0,0处开始清除,长度为50,高度也为50。

  • 绘制路径

  2d上下文支持绘制路径的方法。通过路径可以创造复杂的形状和线条。要绘制路径,首先需要调用beginPath方法,表示要开始绘制路径。然后在调用以下方法:arc(x,y,radius,startangle,endangle,countclockwise),以x、y为圆心绘制一条弧线,起始和结束弧度分别为startangle、endangle。最后一个参数表示是否按逆时针方向计算,默认为false;arcTo(x,y,x1,y1,radius),从上一点开始绘制弧线到x1、y1为止,并以给定的半径radius穿过x、y;bezierCurveTo(c1x,c1y,c2x,c2y,x1,y1),从上一点开始绘制一条曲线,到x1、y1为止,并以c1x、c1y和c2x、c2y为控制点;lineTo(x,y),从上一点开始,绘制一条直线到x,y为止;moveTo(x,y),将绘图游标移动到x、y,不绘制线;quadraticCurveTo(cx,cy,x,y),从上一点开始绘制一条二次曲线,到x、y为止,并以cx和cy为控制点;rect(x,y,width,height),从x,y开始绘制一个矩形,长度为width,高度为height,该矩形是一个路径。

 1 var canvas=document.getElementById("mycanvas");
 2         if(canvas.getContext){
 3             var context=canvas.getContext("2d");
 4             context.strokeStyle="rgba(0,0,255,0.5)";
 5             context.fillStyle="red";
 6             context.beginPath();
 7             //context.moveTo(10,10);
 8             //context.rect(10,10,30,30);
 9             context.moveTo(50,50);
10             context.lineTo(80,80);
11             context.lineTo(100,90);
12             context.stroke();
13             context.closePath();
14             //context.strokeRect(0,0,200,200);
15             //downloadFile('ship.png', canvas.toDataURL("image/png"));
16             
17         }

  通过上面的代码可以绘制一个多段线,从50、50处开始,然后到80、80,最后在100、90结束。

 1  var canvas=document.getElementById("mycanvas");
 2         if(canvas.getContext){
 3             var context=canvas.getContext("2d");
 4             context.strokeStyle="#000099";
 5             context.fillStyle="red";
 6             context.beginPath();
 7             //绘制圆
 8             context.arc(100,100,99,0,2*Math.PI,false);
 9             //移动图标
10             context.moveTo(194,100);
11             //绘制圆
12             context.arc(100,100,90,0,2*Math.PI,false);
13             context.moveTo(100,100);
14             //分针
15             context.lineTo(100,20);
16             context.moveTo(100,100);
17             //时针
18             context.lineTo(35,100);
19             context.moveTo(100,100);
20             //秒针
21             context.lineTo(160,160);
22             context.stroke();
23             context.closePath();
24 
25             //downloadFile('ship.png', canvas.toDataURL("image/png"));
26             
27         }

  通过上面的代码,可以在画布上绘制简单的时钟。

  • 绘制文本

   2d绘图上下文也提供了绘制文本的方法。绘制文本有两个方法fillText和strokeText。这两个方法需要四个参数:文本字符串、x坐标、y坐标、可选的最大像素宽度。这两个方法以下列3个属性为基础:font,表示文本样式,包括样式、大小和字体;textAlign,表示文本的对齐方法,start、end、left、right和center;textBaseline表示文本的基线,可能的值有top、hanging、middle、alphabetic、ideographic和bottom。

  fillText使用fillStyle属性绘制为本,strokeText方法使用strokeStyle属性绘制文本。通常情况,使用fillText来绘制文本。

 1  var canvas=document.getElementById("mycanvas");
 2         if(canvas.getContext){
 3             var context=canvas.getContext("2d");
 4             context.strokeStyle="#000099";
 5             context.fillStyle="red";
 6             context.font="italic 35px 黑体";  
 7             context.textAlign="center";
 8             context.textBaseline="middle";
 9             context.fillText("JavaScript",100,100);
10 
11             //downloadFile('ship.png', canvas.toDataURL("image/png"));
12             
13         }

  通过上面的代码,在canvas中绘制文本。设置textAlign为center和textBaseline为middle,则文字位于100,100的水平和垂直中心点。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浅谈JavaScript的面向对象程序设计(四)

      本文继续讲解JavaScript的面向对象程序设计。继承是面向对象语言中的一个基本概念,面向对象语言支持两种继承实现方式:接口继承和实现继承。接口继承只继承...

    水击三千
  • JavaScript变量和数据类型

    1.JavaScript变量 javascript的变量是松散类型的(弱类型),也就是说一个变量可以用来保存任何类型的数据,每个变量仅仅是用来保存值的占位符。变...

    水击三千
  • Silverlight学习(四) domainservice动态多条件查询

    上次讲了silverlight+MVVN+EF的简单框架,能够实现简单的数据CURD,但是多条件动态的查询一直没有实现。在网上查阅了很多资料,发现自己走了很多误...

    水击三千
  • canvas 实现自定义钟表

    参考博客:https://www.cnblogs.com/liugang-vip/p/3557983.html

    acoolgiser
  • [HTML5] Canvas绘制简单形状

    使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画

    陶士涵
  • Canvas 基本绘制(下)

    HTML5学堂:在前一篇文章《Canvas 基本绘制(上)》当中,我们为大家介绍了Canvas的基本知识——什么是Canvas、如何使用Canvas进行图像的绘...

    HTML5学堂
  • Canvas绘图——2d表

    初学JavaScript,用Canvas画一个表。主要用到昨天学的间歇调用(setInterval)。 方法和属性介绍 context.beginPath()、...

    刘开心_1266679
  • canvas荧光表源码分享

    Youngxj
  • HTML5动态时钟

    felix
  • HTML5之Canvas

    document.createElement("canvas").getContext("2d");

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动