Canvas基础入门

1. Canvas简介

<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。基本的HTML5 Canvas API 包括一个2D环境，允许程序员绘制各种图形和渲染文本，并将图像直接显示在浏览器窗口定义的区域。

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

除了IE8以外，很多新版本的浏览器都支持HTML5 Canvas。支持最好的应该是GoogleChrome，紧接着是Safari、Internet Explorer10、Firefox、Opera。

1. Canvas基本使用

2.1创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制。默认情况下 <canvas> 元素没有边框和内容，可以使用 style 属性来添加边框。标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小。<canvas>简单实例如下：

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

也可以在JS脚本中重新定义canvas的width 和 height 属性。JavaScript代码如下：

   var myCanvas = document.getElementById("myCanvas"); // 找到 <canvas> 元素

var myCanvas_ctx = myCanvas.getContext("2d"); //创建 context 对象

​   myCanvas.width = 200;

myCanvas.height = 100;

需要注意的是canvas有自身的width,height属性来控制尺寸，用css的width,height,控制显示的大小。可以理解为canvas就是一个img,属性的width,height就是这个img的原图像素大小。但在各浏览器下，设置canvas尺寸时发现有最大尺寸限制。

在PC,CHROME浏览器，360浏览器，不能超过16384*16384像素；搜狗浏览器，要比16384*16384稍微小一些；firefox,最大数在11164*11164左右；IE11、EDGE浏览器，没找到极限，只不过越大电脑越慢内存消耗严重。

1. 1. 清空画布

canvas 提供了三种方法清空画布：

1. 简单填充

使用一个新的背景色简单填充整个画布，JavaScript代码如下：

myCanvas_ctx.fillStyle = ‘000000’;

myCanvas_ctx.fillRect(0,0, myCanvas.width, myCanvas.height);

1. 重置画布的宽和高

当画布的宽或高被重置时，当前画布内容就会被移除。JavaScript代码如下：

var width = myCanvas.width；

var height = myCanvas.height；

myCanvas.width = width;

myCanvas.height = height;

1. 重新设置画布的clearRect函数

1. clearRect(x, y, widh, height)；

说明：

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

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

JavaScript代码如下：

var width = myCanvas.width；

var height = myCanvas.height；

clearRect(0, 0, widh, height)；

1. 1. 绘制形状
      1. 路径

路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。在Canvas上画线，我们将使用以下两种方法：

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

使用路径绘制图形需要的步骤：

1. 设置图像样式

1. lineWidth 定义线宽，只能是正值，默认是1.0。起始点和终点的连线为中心，上下各占线宽的一半
2. fillStyle  设置图形的填充颜色
3. strokeStyle设置图形轮廓的颜色

1. beginPath() 创建路径起始点
2. 设置起始点

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

1. 调用绘制方法去绘制出路径
2. 把路径封闭

closePath()闭合路径

1. 路径生成，通过描边或填充路径区域来渲染图形。

1. stroke() 绘制图形轮廓
2. fill() 填充路径的内容区域生成实心的图形

定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条。JavaScript代码如下：

var myCanvas = document.getElementById("myCanvas");

var myCanvas_ctx = myCanvas.getContext("2d");

myCanvas_ctx.moveTo(0, 0);

myCanvas_ctx.lineTo(200, 100);

myCanvas_ctx.stroke();

定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制虚线线条。JavaScript代码如下：

var myCanvas = document.getElementById("myCanvas");

var myCanvas_ctx = myCanvas.getContext("2d");

    myCanvas_ctx.setLineDash([5, 3]); // [实线长度, 间隙长度]

myCanvas_ctx.moveTo(0, 0);

myCanvas_ctx.lineTo(200, 100);

myCanvas_ctx.stroke();

1. 1. 1. 矩形

canvas 提供了二种方法绘制矩形：

1. 绘制一个填充的矩形
   1. fillRect(x, y, width, height)
2. 绘制一个矩形的边框
   1. strokeRect(x, y, width, height)

说明：

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

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

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

1. 1. 1. 圆弧

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

1. arc(x,y,r,start,stop,flag)

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

使用 arc() 方法 绘制一个圆，JavaScript代码如下：

var myCanvas = document.getElementById("myCanvas");

var myCanvas_ctx = myCanvas.getContext("2d");

myCanvas_ctx.beginPath();

    myCanvas_ctx.arc(95, 50, 40, 0, 2*Math.PI);

    myCanvas_ctx.stroke();

myCanvas_ctx.closePath();

1. 1. 1. 文本

canvas 提供了两种方法来渲染文本：

1. fillText(text, x, y [, maxWidth]) 绘制实心的文本

   在指定的(x,y)位置填充指定的文本，maxWidth绘制的最大宽度是可选的.

1. strokeText(text, x, y [, maxWidth]) 绘制空心的文本

   在指定的(x,y)位置绘制文本边框，maxWidth绘制的最大宽度是可选的.

设置文本的样式属性：

1. font 定义字体，默认的字体是 10px sans-serif。
2. textAlign 文本对齐选项，可选的值包括：start, end, left, right or center，默认值是 start。
3. textBaseline 基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
4. direction 文本方向。可选的值包括：ltr, rtl, inherit。默认值是 inherit。

JavaScript代码如下：

var myCanvas = document.getElementById("myCanvas");

var myCanvas_ctx = myCanvas.getContext("2d");

myCanvas_ctx.beginPath();

       myCanvas_ctx.font = “100px sans-serif”;

myCanvas_ctx.fillText(“Hollywood”, 10, 20);

myCanvas_ctx.strokeText(“Hollywood”, 10, 20);

myCanvas_ctx.closePath();

1. 1. 1. 图片

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

1. drawImage(image, x, y [, width, height])

width 和 height是可选的，这两个参数用来控制当像canvas画入时应该缩放的大小。

在放置图片时需要用到以下两个属性：

1. onload 事件在图片加载完成后立即执行。
2. complete 属性可返回浏览器是否已完成对图像的加载。如果加载完成，则返回 true，否则返回 fasle。

JavaScript代码如下：

var myCanvas = document.getElementById("myCanvas");

var myCanvas_ctx = myCanvas.getContext("2d");

        var imgObj = new Image();

        imgObj.src = “icon_dustbox.png”;

        if(imgObj.complete) {

           myCanvas_ctx.drawImage(imgObj, 0, 0);

        } else{

            imgObj.onload = function(){

              myCanvas_ctx.drawImage(this, 0, 0);

            }

        }

1. 1. 1. 创建阴影

给对象添加阴影可以通过设置以下4个Canvas参数：

1. shadowOffsetX 属性可以为正值或负值，负值将会在左侧创建，正值将会在右侧创建。
2. shadowOffsetY 属性可以为正值或负值，负值将会在上方创建，正值将会在下方创建。
3. shadowBlur 属性用来设置阴影模糊效果的程度
4. shadowColor 属性可以是任何HTML颜色的常量字符串，rgb()或rgba()或十六进制数值字符串

在线段的右下方创建阴影，JavaScript代码如下：

var myCanvas = document.getElementById("myCanvas");

var myCanvas_ctx = myCanvas.getContext("2d");

       myCanvas_ctx.shadowColor = "rgba(127, 127, 127, 1)";

       myCanvas_ctx.shadowOffsetX = 3;

       myCanvas_ctx.shadowOffsetY = 3;

myCanvas_ctx.shadowBlur = 10;

myCanvas_ctx.moveTo(0, 0);

myCanvas_ctx.lineTo(200, 100);