canvas基础学习（一），canvas基础学习

canvas基础学习（一），canvas基础学习一、概述canvas它和其它的HTML5标签的使用基本一致，但是它相当于在浏览器中建立一个画布，可以再这个画布上画图、创建动画甚至是3D游戏。

canvas基础学习（一），canvas基础学习

一、概述

canvas它和其它的HTML5标签的使用基本一致，但是它相当于在浏览器中建立一个画布，可以再这个画布上画图、创建动画甚至是3D游戏。由于canvas要适配不同终端的分辨率，所以尽可能的在标签内设置高度和宽度，这个也符合W3C的标准。代码格式如下，当浏览器不支持canvas标签的时候，会显示其中的文字。

<canvas > 亲，您的浏览器不支持canvas </canvas>

而在canvas的坐标体系中,是以左上角为坐标原点，向右为x轴正方向，向下为y轴正方向，如下图

而在canvas中，进行绘制需要首先获取canvas的上下文环境context，而后调用API进行图像的绘制

var canvas = document.getElementById("main"), ctx = canvas.getContext("2d");

二、线条的绘制和填充

在canvas中，各个图像绘制代码可以通过beginPath()和closePath()这两个函数进行包裹，主要用于分割各个画图，表示开始和结束。线条的绘制主要调用方法是moveTo(x,y)、lineTo(x,y)、stroke()、arc()、arcTo()、fill()，使用的属性包括lineWidth、lineCap、lineJoin、strokeStyle、fillStyle等。

1、画出边角为圆角的一条线段

ctx.beginPath(); ctx.strokeStyle = "black"; ctx.lineWidth = 6; ctx.lineCap = "round"; ctx.moveTo(400,400); ctx.lineTo(600,400); ctx.stroke(); ctx.closePath();

效果图为：

其中strokeStyle表示线条的颜色，lineWidth表示线条的宽度，lineCap设置线条的边缘为圆角，lineCap的属性有butt|round|square，第一个是默认值表示平直的边缘，round为圆角，square为正方的边缘。moveTo(x,y)表示划线的起点为(x,y)坐标，而lineTo(x,y)设置线条的终点为(x,y)，最后通过调用stroke()方法进行绘制。

2、画出两条线段，焦点为圆角

ctx.beginPath(); ctx.strokeStyle = "black"; ctx.lineWidth = 10; ctx.lineJoin = "round"; ctx.moveTo(400,500); ctx.lineTo(600,500); ctx.lineTo(600,600); ctx.stroke(); ctx.closePath();

效果图为：

和上面的demo的不同点在于使用的属性为lineJoin，同样它也有三个属性bevel|round|miter，第一个是默认值表示斜角，而miter表示尖角。同时lineTo(x,y)可以调用多次，进行线段的绘制，所以可以通过moveTo()和lineTo()这两个方法进行多边形的绘制

3、矩形的绘制并填充颜色

ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(100,50); ctx.lineTo(100,100); ctx.lineTo(50,100); ctx.lineTo(50,50); ctx.lineWidth = 4; ctx.strokeStyle = "red"; ctx.stroke(); ctx.fillStyle = "blue"; ctx.fill(); ctx.closePath();

效果图为：

通过moveTo()和lineTo()方法进行多边形的绘制后，得到了一个闭合区间，就可以调用fill()方法对其中的颜色进行填充，fillStyle则是设置闭合区间内的颜色。如果不用stroke()方法，也就是不绘制外边框的线条，则可以省去最后的那个回到起点的方法ctx.lineTo(50,50)，因为fill()会自动将起点和终点进行连接得到一个闭合区间。

如果是单纯的矩形而非不规则的多变型的时候，可以直接调用canvas的api方法strokeRect(x,y,w,h)和fillRect(x,y,w,h);前两个参数表示起点的坐标，后两个表示矩形的宽度和高度。

ctx.beginPath(); ctx.lineWidth = 3; ctx.strokeStyle = "darkgray"; ctx.strokeRect(50,50,200,100); ctx.closePath(); ctx.beginPath(); ctx.fillStyle = "coral"; ctx.fillRect(300,50,200,100); ctx.closePath();

效果图为：

4、弧形的绘制

首先是arc(x,y,r,beginPi,endPi,anticlockwise)函数，前两个参数表示圆心的x,y坐标，中间的那个r表示圆的半径，后两个参数表示起始弧度和结束弧度,最后表示是否是逆时针绘制，默认是false即顺时针绘制。在canvas中，无论是顺时针还是逆时针，圆的弧度都是一个定值，如下图：

ctx.beginPath(); ctx.arc(320,200,50,0,Math.PI*2); ctx.lineWidth = 3; ctx.strokeStyle = "black"; ctx.stroke(); ctx.fillStyle = "chartreuse"; ctx.fill(); ctx.closePath();

效果图为：

还可以通过arcTo(x1,y1,x2,y2,r);绘制圆弧，它与moveTo(x,y)一起进行使用，(x,y)(x1,y1)与(x1,y1)(x2,y2)以这两条线段为切线，绘制半径为r的圆弧，起点和终点为那两个切点。

ctx.beginPath(); ctx.lineTo(400,200); ctx.arcTo(500,200,500,300,100); ctx.strokeStyle = "aqua"; ctx.stroke(); ctx.closePath();

效果图为：

最后就是贝塞尔曲线绘制曲线，由于数学算法比较复杂，也没有过多研究

a、二次贝塞尔曲线

cxt.quadraticCurveTo(x1,y1,x2,y2);

同样是与 cxt.moveTo(x0,y0);混用，其是通过(x1,y1)为控制点画圆弧

该网址是二次贝塞尔曲线的测试网址

b、三次贝塞尔曲线

cxt.bezierCurveTo(x1,y1,x2,y2,x3,y3);

同样是与 cxt.moveTo(x0,y0);混用，其是通过(x1,y1),(x2,y2)为控制点画圆弧

该网址是三次贝塞尔曲线的测试网址

（ps:其中三次曲线比二次曲线好用，他可以绘制会各种突出弧形以及波浪）

三、图形变换

无论哪种语言处理图像时，都有一个思想。那就是先确定好图形画法函数，然后通过图形变换函数将图形进行位移、旋转角度、大小的改变。

在canvas中，由于canvas是一种基于状态的编程，所以之前提到在绘制点与点之间的直线以及颜色时使用

context.beginPath();

context.closePath();

这两个函数可以将点与点之间的函数的状态进行隔离，并且还可以完成封闭的图形，即首尾点会自动连接

而在图形变换中也需要这样的规范写法，它们分别是

context.save();

context.restore();

通过这两个函数将函数变换的函数隔离开

1、translat

context.translat(x,y)