美文网首页前端技术
Canvas的基本介绍及简单应用

Canvas的基本介绍及简单应用

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

神奇且强大的canvas

一.Canvas的基本介绍

1.什么是Canvas

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

2.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实现。

8 版本支持

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

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

3.Canvas绘制线条

01Canvas标签语法和属性

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

注意:

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

02 浏览器不兼容处理

  • ie9以上才支持canvas, 其他chrome、Safari、Opera等都支持

  • 只要浏览器兼容canvas,那么就会支持绝大部分api(个别最新api除外)

  • 移动设备几乎支持Canvas的所有API

  • 2d的支持的都非常好,3d(webgl)ie11才支持,其他都支持

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

      eg:
      <canvas id="canvas">
      你的浏览器不支持canvas,请升级浏览器.浏览器不支持,显示此行文本
      </canvas>
    
  • 如果浏览器不兼容,可以使用flash等方式进行替换。

4.Canvas绘图上下文context

01 Context:Canvas的上下文、绘制环境。

  • 上下文:是所有的绘制操作api的入口或者集合。

  • Canvas自身无法绘制任何内容,Canvas的绘图是使用JS调用Canvas的接口来完成的。

  • Context对象就是JavaScript操作Canvas的接口。

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

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

5.基本的绘制路径

5.1Canvas绘制的基本说明

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

5.2Canvas绘制的基本步骤:

  • 第一步:获得上下文 =>canvasElem.getContext('2d');

  • 第二步:开始路径规划 =>ctx.beginPath()

  • 第三步:移动起始点 =>ctx.moveTo(x, y)

  • 第四步:绘制(点、线、面、图片...) =>ctx.lineTo(x, y)

  • 第五步:闭合路径 =>ctx.closePath();

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

      eg:
      <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的基本介绍 1.什么是Canvas 定义:是HTML5提供的一种新标签,...

  • 图像处理相关收集(一)

    1、Paint及Canvas的简单应用 2、详解Paint的setPathEffect(PathEffect ef...

  • 开发Canvas 绘画应用(二):实现绘画

    开发Canvas 绘画应用(一):搭好框架 中我们已经把基本框架及基础功能实现了,现在要实现本应用的重点:绘画功能...

  • Data Binding使用详解(一)

    本文介绍了Data Binding的基本用法,包括一些基本概念、事件的处理及观察者模式的简单应用。 简介 Data...

  • canvas 手势控制

    基本介绍 关于 canvas 的基本使用,可以参考以下两个网站: Android Canvas绘图详解(图文) -...

  • 简单介绍及基本操作

    jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极...

  • React简单介绍及应用

    React介绍 react不是一个mvc的框架,它仅仅是V层。它是一个鼓励构建随着数据变化而改变UI表现的库。 R...

  • React简单介绍及应用

    React介绍 react不是一个mvc的框架,它仅仅是V层。它是一个鼓励构建随着数据变化而改变UI表现的库。 R...

  • Canvas的简单介绍

    1:基本概念 Canvas是HTML5的一个新特性,canvas又叫做画板。顾名思义,我们可以在canvas上绘制...

  • iCarousel的简单介绍及应用

    iOS开源类iCarousel介绍 iCarousel是一个类,它继承于UIView,用于简化实现各种类型的旋转木...

网友评论

    本文标题:Canvas的基本介绍及简单应用

    本文链接:https://www.haomeiwen.com/subject/dvawnttx.html