canvas入门教程

什么是 canvas?

（备注：本文只是简单入门，更多具体的用法可另参考：https://www.cnblogs.com/chrischan/p/7003772.html）

 

        canvas就是一个画图用的标签。

       <canvas>不像您想象中的那么神秘，它仅仅只是HTML页面的一个标签而已，只不过是HTML5新增的标签而已。这个DOM元素用于图形的绘制，但是<canvas> 标签只是图形容器，想要绘制图形必须通过脚本 (通常是JavaScript)来完成。我们可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

       在HTML5之前，如果需要在网页上显示图像，只能使用<img>标签，但只能显示静态图片，不能提供实时绘制和渲染。因此，后来出现了一些第三方解决方案，如Flash、Silverlight等；但是这些第三方解决方案的最大问题就是需要安装插件。

　　canvas的简单用法：

　　<canvas>定义了一个绘图区域，在这个区域中，使用JavaScript可以绘制任何你想画的东西，比如：点、线、矩形、圆。这是一个基于<canvas>的绘图板程序，你可以在上面随意绘制任何形状，改变其颜色，甚至回放你的绘制过程。

        html结构：

　　

1 <canvas id="myCanvas" width="200" height="100"
2 style="border:1px solid #000000;">
3 </canvas>

　　javascript脚本:

　　在canvas画布上画矩形：

1 var c=document.getElementById("myCanvas");//首先获取<canvas> 元素:
2 var ctx=c.getContext("2d");//创建 context 对象,getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，
   //注意2d不要写成2D，会报错。要想绘制3D图形，传入"webgl"替换“2d”即可
3 ctx.fillStyle="#FF0000";//设置填充的的颜色（此行代码省略即为默认设置的黑色），fill就是天朝的意思，画圆的时候直接ctx.fill()就填上了圆的颜色
4 ctx.fillRect(0,0,150,75);//绘制一个矩形，在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。左上角那个点的坐标是（0,0），分别对应2D平面的横轴和纵轴

     在canvas画布上画线：

在Canvas上画线，我们将使用以下两种方法：

  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 "ink" 的方法，就像stroke()。stroke方法可以通过JS脚本直接画线条，例如：

1 var c=document.getElementById("myCanvas");
2 var ctx=c.getContext("2d");
3 ctx.moveTo(0,0);//设置起点坐标，两个参数分别对应2D平面的x和y轴
4 ctx.lineTo(200,100);//设置终点坐标，两个参数分别对应2D平面的x和y轴
5 ctx.stroke();//连线

      在canvas画布上圆形：

在canvas中绘制圆形，我们将使用以下方法：

1 arc(x,y,r,start,stop);//参数分别对应横轴、纵轴、半径、起点圆弧度，终点圆弧度（后面可以放一个true表示顺时针画，放false表示逆时针画，不放则是默认的true）

画圆示例代码：

1 var c=document.getElementById("myCanvas");
2 var ctx=c.getContext("2d");
3 ctx.beginPath();
4 ctx.arc(95,50,40,0,2*Math.PI);//定义画圆的参数
5 ctx.stroke();//按照上一步定义好的路径开始画线

canvas 绘制文本：

1 var c=document.getElementById("myCanvas");
2 var ctx=c.getContext("2d");
3 ctx.font="30px Arial";//定义字体
4 ctx.fillText("Hello World",10,50);//定义填充文本内容、文本距画布左边的距离，文本距画布顶部的距离

canvas 绘制镂空文本：

1 var c=document.getElementById("myCanvas");
2 var ctx=c.getContext("2d");
3 ctx.font="30px Arial";//定义字体
4 ctx.strokeText("Hello World",10,50);//定义镂空文本内容、文本距画布左边的距离，文本距画布顶部的距离

Canvas - 渐变：分线性渐变和径向渐变

线性渐变：就是从一个点的颜色到两一个点的颜色按直线缓慢过渡颜色，过渡的方向从第一个参数的坐标开始，第二个参数的坐标终结。

创建一个线性渐变。使用渐变填充矩形：

 1 var c=document.getElementById("myCanvas");
 2 var ctx=c.getContext("2d");
 3  
 4 // 创建渐变
 5 var grd=ctx.createLinearGradient(0,0,200,0);//第一个参数对应起点的横、纵坐标，第二个参数对应终点的横、纵坐标
 6 grd.addColorStop(0,"red");//定义渐变开始的颜色
 7 grd.addColorStop(1,"white");//定义渐变过渡到哪种颜色
 8  
 9 // 填充渐变
10 ctx.fillStyle=grd;
11 ctx.fillRect(10,10,150,80);//填充为一个矩形，前两个参数代表矩形左上角的那个点的位置，后面两个参数代表矩形的长和宽

可以看出：

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient():

径向渐变：

径向渐变，其实就是环形的渐变了，由圆心（或者是较小的同心圆）开始向外扩散渐变的效果。

创建一个径向/圆渐变。使用渐变填充矩形：

 1 var c=document.getElementById("myCanvas");
 2 var ctx=c.getContext("2d");
 3  
 4 // 创建渐变
 5 var grd=ctx.createRadialGradient(75,50,5,90,60,100);//前两个参数表示开始圆的圆心的坐标，
//第个参数表示开始圆的半径，第四、五个参数表示渐变结束圆的圆心坐标，最后一个参数表示结束圆的半径
 6 grd.addColorStop(0,"red");//设置渐变开始的颜色
 7 grd.addColorStop(1,"white");//设置渐变结束的颜色
 8  
 9 // 填充渐变
10 ctx.fillStyle=grd;//设置填充的颜色-->渐变色
11 ctx.fillRect(10,10,150,80);//填充为矩形

Canvas -直接放置图像：

把一幅图像放置到画布上, 使用以下方法:

1 drawImage(image,x,y);//参数分别对应图像、图像距左边的距离、图像距顶部距离

举例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head> 
 4 <meta charset="utf-8"> 
 5 <title>document</title> 
 6 </head>
 7 <body>
 8 
 9 <p>Image to use:</p>
10 <img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
11 <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
12 您的浏览器不支持 HTML5 canvas 标签。</canvas>
13 
14 <script>
15 
16 var c=document.getElementById("myCanvas");
17 var ctx=c.getContext("2d");
18 var img=document.getElementById("scream");
19 
20 img.onload = function() {
21     ctx.drawImage(img,10,10);
22 } 
23 </script>
24 
25 </body>
26 </html>

 

posted @ 2018-10-14 20:08  龙波帝国  阅读(896)  评论(0)    收藏  举报