Canvas的基本介绍及简单应用

作者: Ainy尘世繁花终凋落 | 来源:发表于2017-03-21 11:51 被阅读0次

神奇且强大的canvas

一．Canvas的基本介绍

１．什么是Canvas

定义：是HTML5提供的一种新标签, ie9才开始支持的，Canvas是一个矩形区域的画布，可以用JS控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

２．Canvas主要应用的领域

1 可视化数据： 各类统计图表，比如:百度的echart

2 场景秀： 用Canvas实现动态的广告效果能够非常融洽的跨平台运行。如:手机中微产品.在移动端兼容性很好

3 游戏： canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas成为HTML5小游戏开发首选。现阶段h5做游戏,营业方式不是很明确. 25 超棒的 HTML5 Canvas 游戏

4 其他可嵌入网站的内容 (多用于活动页面、特效)：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。

5 趋势=> 模拟器： 无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。模拟真实硬件环境,如移动端各种类型手机.

6 趋势=> 远程计算机控制： Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。

7 趋势=> 图形编辑器： Photoshop图形编辑器将能够100%基于Web实现。

８版本支持

最新标准：http://www.w3.org/TR/2dcontext/

稳定版本的标准：http://www.w3.org/TR/2013/CR-2dcontext-20130806/

３．Canvas绘制线条

０１Canvas标签语法和属性

canvas：画布油布的意思英 ['kænvəs] 美 ['kænvəs]
标签名：canvas，双标签，需要闭合。
单位： px，可以设置width和height属性，否则忽略单位。
width和hegiht：默认300*150像素

注意：

不要用CSS控制它的宽和高,会导致内部图片被拉伸，
重新设置canvas标签的宽高属性会让画布擦除所有的内容
可以给canvas画布设置背景色

０２　浏览器不兼容处理

ie9以上才支持canvas, 其他chrome、Safari、Opera等都支持
只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)
移动设备几乎支持Canvas的所有API
2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持

如果浏览器不兼容，最好进行友好提示

  ｅｇ：
  <canvas id="canvas">
  你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本
  </canvas>

如果浏览器不兼容，可以使用flash等方式进行替换。

４．Canvas绘图上下文context

０１ Context：Canvas的上下文、绘制环境。

上下文：是所有的绘制操作api的入口或者集合。
Canvas自身无法绘制任何内容，Canvas的绘图是使用JS调用Canvas的接口来完成的。
Context对象就是JavaScript操作Canvas的接口。

使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文

  ｅｇ：
  //获得画布
  var canvas  = document.getElementById( 'cavsElem' );
  //注意：2d小写，二维， 3d：webgl
  var ctx = canvas.getContext( '2d' );

５．基本的绘制路径

５．１Ｃanvas绘制的基本说明

canvas坐标系，从最左上角0,0开始。x向右增大， y向下增大
绘制起点：ctx.moveTo(x, y); //x,y 都是相对于 canvas盒子的最左上角。
绘制终点：ctx.lineTo(x, y); //从x,y的位置绘制一条直线到起点或者上一个线头点。
开始路径：ctx.beginPath();作用：将当路径和之前路径隔离,方便你对当前路径进行设置样式,线宽.
闭合路径：ctx.closePath();作用：闭合路径会自动把最后的线头和开始的线头连在一起。
描边：ctx.stroke();

５．２Canvas绘制的基本步骤：

第一步：获得上下文 =>canvasElem.getContext('2d');
第二步：开始路径规划 =>ctx.beginPath()
第三步：移动起始点 =>ctx.moveTo(x, y)
第四步：绘制(点、线、面、图片...) =>ctx.lineTo(x, y)
第五步：闭合路径 =>ctx.closePath();

第六步：绘制描边 =>ctx.stroke();

  ｅｇ：
  <body>
  <canvas id="canvas" width="900" height="600" style="border: 1px solid #000;">你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本</canvas>
  
  <script>
      //1.获取canvas
      var canvas = document.getElementById('canvas');
      //2.获取上下文
      var ctx = canvas.getContext('2d');
  
      //3.绘制一条直线
      //起点
      ctx.moveTo(100,100);
      //终点
      ctx.lineTo(300,100);
      //注意:以上只是对当前路径进行描述,表示的是路径的状态,并没有进行绘制操作
  
      //线宽
      ctx.lineWidth = 10;
      //颜色
      ctx.strokeStyle = 'red';
  
      //绘制 描边
      ctx.stroke();
  
      //4.绘制第二条线
      //开启路径.作用:将当路径和之前路径隔离,方便你对当前路径进行设置样式,线宽.
      ctx.beginPath();
      ctx.moveTo(200,50);
      ctx.lineTo(200,250);
  
      //5.绘制第三条线段
      ctx.lineTo(300,300);
  
      //闭合路径:  作用:将开始的线头和结束的线头连接
      ctx.closePath();
  
      ctx.strokeStyle = 'green';
      ctx.lineWidth = 5;
  
      //描边
      ctx.stroke();
  
  </script>

二.Canvas绘制的基本应用

2.1 Canvas绘制表格-背景

eg:
<script>
    //1.获取canvas和上下文
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    //2.设置常量
    var marginWH = 10;//表示每一个格子之间的空格距离
    //计算行和列
    var row = canvas.height / marginWH;
    var col = canvas.width / marginWH;
    /*
    * 绘制背景网格
    * */
    //3.绘制横线
    for(var i = 0;i<row;i++){
        ctx.moveTo(0,i * marginWH);
        ctx.lineTo(canvas.width,i * marginWH);
    };
    //绘制竖线
    for(var i = 0;i<col;i++){
        ctx.moveTo(i * marginWH,0);
        ctx.lineTo(i * marginWH,canvas.height);
    };
    //设置颜色
    ctx.strokeStyle = 'red';
    //设置线宽
    ctx.lineWidth = 0.5;
    //4.绘制 描边
    ctx.stroke();
    
</script>

2.2 Canvas绘制表格完成

eg:
<script>
    //1.获取canvas和上下文
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    //2.设置常量
    var marginWH = 10;
    //计算行和列
    var row = canvas.height / marginWH;
    var col = canvas.width / marginWH;
    /*
    * 绘制背景网格
    * */
    //3.绘制横线
    for(var i = 0;i<row;i++){
        ctx.moveTo(0,i * marginWH);
        ctx.lineTo(canvas.width,i * marginWH);
    };
    //绘制竖线
    for(var i = 0;i<col;i++){
        ctx.moveTo(i * marginWH,0);
        ctx.lineTo(i * marginWH,canvas.height);
    };
    //设置颜色
    ctx.strokeStyle = 'red';
    //设置线宽
    ctx.lineWidth = 0.5;
    //4.绘制 描边
    ctx.stroke();

    //5.绘制坐标轴
    //常量
    var x0 = 100, y0 = 500;//坐标原点
    var maxWidth = 500, maxHeight = 400;//坐标轴的长度
    //5.1横轴
    ctx.beginPath();
    ctx.moveTo(x0,y0);
    ctx.lineTo(x0 + maxWidth,y0);
    ctx.lineTo(x0 + maxWidth - marginWH,y0 - marginWH);

    ctx.moveTo(x0 + maxWidth,y0);
    ctx.lineTo(x0 + maxWidth - marginWH,y0 + marginWH);
    //设置颜色和线宽
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 5;
    //5.2绘制 描边
    ctx.stroke();

    //6.绘制竖坐标
    ctx.beginPath();
    ctx.moveTo(x0,y0);
    ctx.lineTo(x0,y0 - maxHeight);
    ctx.lineTo(x0 - marginWH,y0 - maxHeight + marginWH);

    ctx.moveTo(x0,y0 - maxHeight);
    ctx.lineTo(x0 +marginWH,y0 - maxHeight + marginWH);
    //设置颜色和线宽
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 5;
    //绘制 描边
    ctx.stroke();

    //7.绘制曲线
    //常量
    var data = [20, 50, 10, 60, 40, 80];
    //比例
    var w = maxWidth / data.length;
    var h = maxHeight / 100;//(1:100)设置比例
    //遍历
   //坐标点 类似于{x:20,y:30}
    var pointArr = [];
    for(var i = 0;i<data.length;i++){
        pointArr.push({
            x:x0 + w *(i+1),
            y: y0 - h * data[i]
        });
    }
    //遍历坐标点数组
    //开启路径
    ctx.beginPath();
    //起点
    ctx.moveTo(x0,y0);
    for(var i = 0;i<pointArr.length;i++){
        //终点
        ctx.lineTo(pointArr[i].x,pointArr[i].y);
    };
    //设置颜色和线宽
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 2;

    //绘制 描边
    ctx.stroke();
    
</script>

2.3Canvas绘制画板

eg:
<script>
    //1.获取canvas和上下文
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    //2.监听鼠标的移动
    canvas.onmousedown = function (event){
        //清屏操作
        ctx.clearRect(0,0,canvas.width,canvas.height);
        //开启路径
        ctx.beginPath();
        //起点
        ctx.moveTo(event.offsetX, event.offsetY);
        canvas.onmousemove = function (event){
            //终点
            ctx.lineTo(event.offsetX, event.offsetY);

            //设置颜色和线宽
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 5;
            //绘制 描边
            ctx.stroke();
        };
        canvas.onmouseup = function (){
            canvas.onmousemove = null;
            canvas.onmouseup = null;
        };

    };

2.4Canvas绘制矩形

1.方式1:先设置rect()方法,然后设置样式,再描绘ctx.stroke();

语法：ctx.rect(x, y, width, height);
解释：x, y是矩形左上角坐标， width和height都是以像素计

注意:

rect方法只是规划了矩形的路径，并没有填充和描边。
rect: abbr. 矩形（rectangular）；收据（receipt）

2.方式2:快速创建描边矩形和填充矩形

语法： ctx.strokeRect(x, y, width, height);
参数跟ctx.rect相同，注意此方法绘制完路径后立即进行stroke绘制
语法：ctx.fillRect(x, y, width, height);
参数跟ctx.rect相同，此方法执行完成后。立即对当前矩形进行fill填充。

3.清除矩形(clearRect)

语法：ctx.clearRect(x, y, width, hegiht);

解释：清除某个矩形内的绘制的内容，相当于橡皮擦。

  eg:
  <script>
  //1.获取canvas和上下文
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  //2.监听鼠标的移动
  canvas.onmousedown = function (event){
      //清屏操作
      ctx.clearRect(0,0,canvas.width,canvas.height);
      //开启路径
      ctx.beginPath();
      //起点
      ctx.moveTo(event.offsetX, event.offsetY);
      canvas.onmousemove = function (event){
          //终点
          ctx.lineTo(event.offsetX, event.offsetY);

          //设置颜色和线宽
          ctx.strokeStyle = 'red';
          ctx.lineWidth = 5;
          //绘制 描边
          ctx.stroke();
      };
      canvas.onmouseup = function (){
          canvas.onmousemove = null;
          canvas.onmouseup = null;
      };

  };

2.5Canvas绘制弧线

2.51 绘制圆形(arc)

01 arc()方法说明:

概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。
语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
arc: 弧（度）弧形物；天穹英 [ɑːk] 美 [ɑrk]
counter 反击，还击；反向移动，对着干；反驳，回答 ['kaʊntə] 美 ['kaʊntɚ]
x,y：圆心坐标。
r：半径大小。
sAngle:绘制开始的角度。圆心到最右边点是0度，顺时针方向弧度增大。
eAngel:结束的角度，注意是弧度。π
counterclockwise：是否是逆时针。true是逆时针，false：顺时针(默认)
弧度和角度的转换公式： rad = deg*Math.PI/180;
在Math提供的方法中sin、cos等都使用的弧度

三角函数的补充:

Math.sin(弧度); //夹角对面的边和斜边的比值
Math.cos(弧度); //夹角侧边与斜边的比值

圆形上面的点的坐标的计算公式:

x =x0 + Math.cos(rad) * R;//x0和y0是圆心点坐标
y =y0 + Math.sin(rad) * R;//注意都是弧度

eg:
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    //2.绘制图片  方式一  标签绘制
    /*var img = document.getElementById('img');
    //注意:图片一定要在加载完成后再进行绘制
    //x,y 绘制图片左上角的坐标，在画布上绘制的坐标点 img是绘制图片的dom对象。
    img.onload = function (){
        ctx.drawImage(img,100,100);
    }*/

    //3.绘制图片 方式二 对象绘制
    /*var image = new Image();
    image.src = 'images/img_01.jpg';
    image.addEventListener('load',function(){
        ctx.drawImage(image,100,100);
    });*/

    //4.绘制图片  方式三 对象绘制   等比例
    /*var image = new Image();
    image.src = 'images/img_01.jpg';
    image.addEventListener('load',function (){
        //等比公式  w / h = 图片的宽/ 图片的高;
        var w = 200;
        var h = w * image.height / image.width;
        ctx.drawImage(image,w,h);
    });*/

    //5.图片截取
    //方法:context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    var image1 = new Image();
    image1.src = 'images/img_01.jpg';
    image1.addEventListener('load',function (){
        //img:截取图片
        //50,50,120,120  表示截取的x,y, 截取的宽和高
        //200,200,120,120  表示在画布上的x,y和宽高
        ctx.drawImage(image1,50,50,120,120,200,200,120,120);
    });
    
</script>

2.12Canvas绘制帧动画

eg:
<body style="padding: 100px">
<canvas id="canvas" width="900" height="600" style="border: 1px solid #000;"></canvas>
<!--![](images/img_01.jpg)-->
<button dir=2>上</button>
<button dir=6>下</button>
<button dir=0>左</button>
<button dir=4>右</button>
<p></p>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    //2.绘制图片
    var image = new Image();
    image.src = 'images/girl.png';
    //常量
    var clipWH = 256;
    var index = 0;//累加的变量

    var dir = 0;//设置默认的方向为0;
    image.addEventListener('load',function (){
        //记录this
        var that = this;
        //开启定时器
        setInterval(function (){
            //清屏
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.drawImage(that,index*clipWH,dir*clipWH,clipWH,clipWH,200,200,clipWH,clipWH);
            //累加
            index++;
            //取余---让其无限的循环//让他永远等于 0-7
            index %= 8;
        },200);

    });

    //点击按钮,切换动画
    //获取所有的按钮,根据字符串,获取所有的子元素
    var buttonList = document.querySelectorAll('button');
    for(var i= 0;i<buttonList.length;i++){
        //给所有的按钮添加点击事件
        buttonList[i].addEventListener('click',function (){
            //获取按钮中的dir中的值
            dir = this.getAttribute('dir');
        });
    }
</script>

Canvas的基本介绍及简单应用

神奇且强大的canvas

一．Canvas的基本介绍

二.Canvas绘制的基本应用

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端技术