一、canvas简介

 <canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。

Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。

Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 <canvas>, Internet Explorer 从IE9开始<canvas> 。Chrome和Opera 9+ 也支持<canvas>。

二、Canvas基本使用

2.1 `<canvas>`元素

<canvas id="tutorial" width="300" height="300"></canvas>

<canvas>看起来和<img>标签一样，只是 <canvas> 只有两个可选的属性 width、height 属性，而没有 src、alt 属性。

如果不给<canvas>设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置<canvas>的宽高。

1、替换内容

由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者浏览器不支持HTML元素<canvas>，在这些浏览器上你应该总是能展示替代内容。

支持<canvas>的浏览器会只渲染<canvas>标签，而忽略其中的替代内容。不支持 <canvas> 的浏览器则会直接渲染替代内容。

（1）用文本替换：

 <canvas>

     你的浏览器不支持canvas,请升级你的浏览器

 </canvas>

（2）用 <img> 替换：

 <canvas>

     <img src="./美女.jpg" alt="">

 </canvas>

结束标签`</canvas>`不可省

与 <img>元素不同，<canvas>元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

2.2 渲染上下文(Thre Rending Context)

<canvas>会创建一个固定大小的画布，会公开一个或多个 渲染上下文(画笔)，使用 渲染上下文来绘制和处理要展示的内容。

我们重点研究 2D渲染上下文。其他的上下文我们暂不研究，比如， WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。

 var canvas = document.getElementById('tutorial');

  //获得 2d 上下文对象

 3var ctx = canvas.getContext('2d');

2.3 检测支持性

 var canvas = document.getElementById('tutorial');

 if (canvas.getContext){

   var ctx = canvas.getContext('2d');

   // drawing code here

 } else {

   // canvas-unsupported code here

 }

2.4 代码模板

 <html>

 <head>

     <title>Canvas tutorial</title>

     <style type="text/css">

         canvas {

             border: 1px solid black;

         }

     </style>

 </head>

 <canvas id="tutorial" width="300" height="300"></canvas>

 </body>

 <script type="text/javascript">

     function draw(){

         var canvas = document.getElementById('tutorial');

         if(!canvas.getContext) return;

         var ctx = canvas.getContext("2d");

         //开始代码

     }

     draw();

 </script>

 </html>

2.5 一个简单的例子

绘制两个长方形。

<html>

<head>

    <title>Canvas tutorial</title>

    <style type="text/css">

        canvas {

            border: 1px solid black;

        }

    </style>

</head>

<canvas id="tutorial" width="300" height="300"></canvas>

</body>

<script type="text/javascript">

    function draw(){

        var canvas = document.getElementById('tutorial');

        if(!canvas.getContext) return;

        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";

        //绘制矩形

        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

        ctx.fillRect (30, 30, 55, 50);

    }

    draw();

</script>

</html>

三、绘制形状

3.1 栅格`(grid)`和坐标空间

如下图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点来定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。

后面我们会涉及到坐标原点的平移、网格的旋转以及缩放等。

3.2 绘制矩形

<canvas> 只支持一种原生的图形绘制：矩形。所有其他图形都至少需要生成一种路径(path)。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。

canvast 提供了三种方法绘制矩形：

fillRect(x, y, width, height)

绘制一个填充的矩形
strockRect(x, y, width, height)

绘制一个矩形的边框
clearRect(x, y, widh, height)

清除指定的矩形区域，然后这块区域会变的完全透明。

说明：

这3个方法具有相同的参数。

 x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)

 width, height：指的是绘制的矩形的宽和高。

 function draw(){

     var canvas = document.getElementById('tutorial');

     if(!canvas.getContext) return;

     var ctx = canvas.getContext("2d");

     ctx.fillRect(10, 10, 100, 50);  //绘制矩形,填充的默认颜色为黑色

     ctx.strokeRect(10, 70, 100, 50);  //绘制矩形边框

 }

 draw();

ctx.clearRect(15, 15, 50, 25);

四、绘制路径(`path`)

图形的基本元素是路径。

路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

一个路径，甚至一个子路径，都是闭合的。

使用路径绘制图形需要一些额外的步骤：

创建路径起始点
调用绘制方法去绘制出路径
把路径封闭
一旦路径生成，通过描边或填充路径区域来渲染图形。

下面是需要用到的方法：

beginPath()

新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
moveTo(x, y)

把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
closePath()

闭合路径之后，图形绘制命令又重新指向到上下文中
stroke()

通过线条来绘制图形轮廓
fill()

通过填充路径的内容区域生成实心的图形

4.1 绘制线段

 function draw(){

     var canvas = document.getElementById('tutorial');

     if (!canvas.getContext) return;

     var ctx = canvas.getContext("2d");

     ctx.beginPath(); //新建一条path

     ctx.moveTo(50, 50); //把画笔移动到指定的坐标

     ctx.lineTo(200, 50);  //绘制一条从当前位置到指定坐标(200, 50)的直线.

     //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做

     ctx.closePath();

     ctx.stroke(); //绘制路径。

 }

 draw();

4.2 绘制三角形边框

 function draw(){

     var canvas = document.getElementById('tutorial');

     if (!canvas.getContext) return;

     var ctx = canvas.getContext("2d");

     ctx.beginPath();

     ctx.moveTo(50, 50);

     ctx.lineTo(200, 50);

     ctx.lineTo(200, 200);

     ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形

     ctx.stroke(); //描边。stroke不会自动closePath()

 }

 draw();

4.3 填充三角形

 function draw(){

     var canvas = document.getElementById('tutorial');

     if (!canvas.getContext) return;

     var ctx = canvas.getContext("2d");

     ctx.beginPath();

     ctx.moveTo(50, 50);

     ctx.lineTo(200, 50);

     ctx.lineTo(200, 200);

     ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。

 }

 draw();

4.4 绘制圆弧

有两个方法可以绘制圆弧：

arc(x, y, r, startAngle, endAngle, anticlockwise):

以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)

注意：
1. 这里的度数都是弧度。
2. 0弧度是指的x轴正方形
```
radians=(Math.PI/180)*degrees   //角度转换成弧度
```
- 1
arcTo(x1, y1, x2, y2, radius):

根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

圆弧案例1：

 function draw(){

     var canvas = document.getElementById('tutorial');

     if (!canvas.getContext) return;

     var ctx = canvas.getContext("2d");

     ctx.beginPath();

     ctx.arc(50, 50, 40, 0, Math.PI / 2, false);

     ctx.stroke();

 }

 draw();

圆弧案例2：

 function draw(){

     var canvas = document.getElementById('tutorial');

     if (!canvas.getContext) return;

     var ctx = canvas.getContext("2d");

     ctx.beginPath();

     ctx.arc(50, 50, 40, 0, Math.PI / 2, false);

     ctx.stroke();

     ctx.beginPath();

     ctx.arc(150, 50, 40, 0, -Math.PI / 2, true);

     ctx.closePath();

     ctx.stroke();

     ctx.beginPath();

     ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);

     ctx.fill();

     ctx.beginPath();

     ctx.arc(150, 150, 40, 0, Math.PI, false);

     ctx.fill();

 }

 draw();

圆弧案例3：

 function draw(){

     var canvas = document.getElementById('tutorial');

     if (!canvas.getContext) return;

     var ctx = canvas.getContext("2d");

     ctx.beginPath();

     ctx.moveTo(50, 50);

     //参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径

     ctx.arcTo(200, 50, 200, 200, 100);

     ctx.lineTo(200, 200)

     ctx.stroke();

     ctx.beginPath();

     ctx.rect(50, 50, 10, 10);

     ctx.rect(200, 50, 10, 10)

     ctx.rect(200, 200, 10, 10)

     ctx.fill()

 }

 draw();

arcTo方法的说明：

这个方法可以这样理解。绘制的弧形是由两条切线所决定。

第 1 条切线：起始点和控制点1决定的直线。

第 2 条切线：控制点1 和控制点2决定的直线。

其实绘制的圆弧就是与这两条直线相切的圆弧。

4.5 绘制贝塞尔曲线

4.5.1 什么是贝塞尔曲线

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。

一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。

贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。

贝塞尔曲线于1962，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发，以稳定数值的方法求出贝兹曲线。

一次贝塞尔曲线(线性贝塞尔曲线)

一次贝塞尔曲线其实是一条直线。

二次贝塞尔曲线

三次贝塞尔曲线

4.5.2 绘制贝塞尔曲线

绘制二次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y):

说明：

参数1和2：控制点坐标

参数3和4：结束点坐标

 function draw(){

     var canvas = document.getElementById('tutorial');

     if (!canvas.getContext) return;

     var ctx = canvas.getContext("2d");

     ctx.beginPath();

     ctx.moveTo(10, 200); //起始点

     var cp1x = 40, cp1y = 100;  //控制点

     var x = 200, y = 200; // 结束点

     //绘制二次贝塞尔曲线

     ctx.quadraticCurveTo(cp1x, cp1y, x, y);

     ctx.stroke();

     ctx.beginPath();

     ctx.rect(10, 200, 10, 10);

     ctx.rect(cp1x, cp1y, 10, 10);

     ctx.rect(x, y, 10, 10);

     ctx.fill();

 }

 draw();

绘制三次贝塞尔曲线

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：

说明：

参数1和2：控制点1的坐标

参数3和4：控制点2的坐标

参数5和6：结束点的坐标

 function draw(){

     var canvas = document.getElementById('tutorial');

     if (!canvas.getContext) return;

     var ctx = canvas.getContext("2d");

     ctx.beginPath();

     ctx.moveTo(40, 200); //起始点

     var cp1x = 20, cp1y = 100;  //控制点1

     var cp2x = 100, cp2y = 120;  //控制点2

     var x = 200, y = 200; // 结束点

     //绘制二次贝塞尔曲线

     ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

     ctx.stroke();

     ctx.beginPath();

     ctx.rect(40, 200, 10, 10);

     ctx.rect(cp1x, cp1y, 10, 10);

     ctx.rect(cp2x, cp2y, 10, 10);

     ctx.rect(x, y, 10, 10);

     ctx.fill();

 }

 draw();

第154天：canvas基础（一）的更多相关文章

HTML5移动开发学习笔记之Canvas基础
1.第一个Canvas程序看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...
canvas基础之旅
canvas 主要使用2D rendering context API 实现其功能和特效. canvas 一般浏览器都支持,但在ie9之前的是不支持的.(解决办法:添加IxplorerCanvas ...
canvas 基础知识整理（二）
html部分: <canvas id="myCanvas" width="800" height="800" ></can ...
canvas 基础知识整理（一）
canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...
《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
canvas 基础知识
canvas 基础低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas <canvas id="canvas" wi ...
canvas基础语法
前面的话 canvas顾名思义是定义在浏览器中的画布.它不仅是一个普通的元素,更是一个强大的编程工具.它的出现已然超过了web基于文档的设计初衷,将网页这一形态的应用推向了另一个高度.利用canvas ...
canvas API ，通俗的canvas基础知识（一）
在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...
canvas基础动画示例
canvas基础动画示例本文主要用最简单的例子,展示canvas动画效果是如何实现的动画效果,是一个球绕着一点旋转 const canvas = document.getElementById(' ...
canvas基础学习
/** * Created by ty on 2016/7/11. * canvas 基础 */ window.onload = function() { var canvas = document. ...

随机推荐

HDFS（0.20.2）运营中急救方案
这段时间折腾的都是hadoop和lucene,总结了hadoop在运营过程中出现问题时的解决方案,请大家指教! HDFS(0.20.2)运营中急救方案 1 Namenode 挂掉( ...
20155207 2016-2017-2 《Java程序设计》第十周学习总结
20155207 2016-2017-2 <Java程序设计>第十周学习总结教材学习内容总结网络编程网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. 狭义的网络编程范畴 ...
从码云把之前的代码git push 回IDEA 对IDEA里的文件进行简单操作
前情提要:我的IDEA里的项目之前已经和码云连接成功可以上传.但我直接在电脑文件夹里对文件进行重命名.剪切.粘贴等操作之后IDEA对操作后的文件不识别,无奈之下我将码云上之前的代码推回重新新建了项目. ...
DIRECT3D状态详解
Microsoft® Direct3D®设备是一个状态机.应用程序设置光照.渲染和变换模块的状态,然后在渲染时传递数据给它们. 本节描述图形流水线用到的所有不同类型的状态. 渲染状态取样器状态纹理 ...
docker error:/root/.docker/config.json: is a directory
问题: 本地没有taskworker镜像,docker从远端拉取,但是拉取时需要读取config.json配置,解析配置时,发现config.json是个目录,错误信息如下: taskworker_1 ...
java class file
目录什么是java类文件幻数主次版本号常量池数和常量池 this_class super_class 接口数量和接口字段数和字段方法数和方法以下内容主要还是参考<Inside JV ...
MAC清理DS_Store和._文件
打开终端输入 find . -name .DS_Store -type f -delete ; find . -type d | xargs dot_clean
该用哪个：Redis与Memcached之间如何选择呢？
华为云分布式缓存Redis5.0和Memcached都是华为云DCS的核心产品. 那么在不同的使用场景之下,如何选择Redis5.0和Memcached呢? 就由小编为大家进行详细的数据对比分析吧 R ...
袋鼠云研发手记 | 袋鼠云EasyManager的TypeScript重构纪要
作为一家创新驱动的科技公司,袋鼠云每年研发投入达数千万,公司80%员工都是技术人员,袋鼠云产品家族包括企业级一站式数据中台PaaS数栈.交互式数据可视化大屏开发平台Easy[V]等产品也在迅速迭代.在 ...
Tess4J -4.0.2- Linux 实践 [解决：Tess4J - Native library (linux-x86-64/libtesseract.so) not found in resource path]
[本文编写于2018年7月5日] Tess4J是Tesseract的Java JNA wrapper.本文介绍了在CentOS 7 操作系统中使用Tess4J的步骤及注意事项.在正式开始之前,先花一点 ...

第154天：canvas基础（一）