Canvas简介

canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。canvas元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。

什么是canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

就是相当于在页面上放置一个canvas元素，就相当于在页面上放置了一块画布，可以在其中进行图形的描绘。

canvas元素只是一块无色透明的区域，需要利用JS编写在其中进行绘画的脚本。

创建Canvas元素

向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度：

<!-- canvas表示画布的意思(在画布中可以化你任意想化的画) --><canvas id="myCanvas" width="500" height="600"></canvas>

<style>*{margin:0;padding:0;}canvas{display: block;margin: 50px auto;border: 2px blue solid;}/*canvas标签默认就有高度和宽度的样式canvas标签可以支持所有的CSS样式*/</style>

canvas标签默认是行元素(display:inline)

那为什么一个display:inline行元素他可以支持宽高呢？？

因为canvas是一个替换元素他就可以支持宽高(什么是可替换元素)

通过JavaScript来绘制canvas

在H5中canvas标签向JS提供了许多API接口，来让我们通过JS来绘制canvas标签中的一些画面等。。。

基础知识

varcanvas=document.getElementById('canvas'); 获取画布

varcxt=canvas.getContext('2d'); 获取2d画笔(最常用)

canvas.getContext('webgl'); 获取3d画笔但是兼容性不是很好(不常用)一般是做不出来的

首先我们要获取画布和画笔 然后就可以在canvas上面画任何的图形了

//获取画布var canvas = document.getElementById('myCanvas');//获取画笔//画布.getContext('2d') 就可以获取到画笔了 当前这个画笔是2d画笔var cxt = canvas.getContext('2d');//2d画笔最常用

我们们在绘制任何图形的时候一般用用两种方式来绘制图形

一种是stroke方式来绘制空心的图形，另一种是fill方式来绘制实心的图形

而我们绘制矩形的时候跟着两种方式有所不同(绘制矩形也可以用stroke和fill方式来绘制)，也可以说canvas提供了更快捷的方式来绘制矩形

//获取画布var canvas = document.getElementById('myCanvas');//获取画笔var cxt = canvas.getContext('2d');//2d画笔最常用//首先你要定义绘制图形什么图形的轨迹//在决定用stroke和fill方式来绘制图形//定义绘制矩形的轨迹cxt.rect(0,0,200,200);//绘制矩形cxt.stroke();

绘制任何图形都能用到的两种方式

cxt.stroke()绘制空心图形

cxt.fill()绘制实心图形

首先你要定义绘制图形的轨迹在来选择用stroke和fill方式来绘制图形

绘制矩形

基础知识

绘制矩形有两种方式

第一种方式

先用rect方法定义一个矩形的轨迹，在用stroke或者是fill方法绘制圆形

cxt.rect(x,y,w,h)定义矩形的轨迹

cxt.stroke()绘制空心矩形

cxt.fill()绘制实心矩形

//获取画布var canvas = document.getElementById('myCanvas');//获取画笔var cxt = canvas.getContext('2d');//2d画笔最常用//定义绘制矩形的轨迹cxt.rect(0,0,200,200);//绘制矩形//cxt.stroke();//绘制空心矩形cxt.fill();//绘制实心矩形

绘制矩形的轨迹：rect接收的参数

cxt.rect(10,20,100,150);//cxt.rect(距离画布左上角的距离,距离画布右上角的距离,绘制图形的宽度,绘制图形的高度)

点前cxt.rect表示你要在距离画布水平方向10像素竖直方向20像素这个点开始绘制矩形，绘制长方形的大小是宽度为100高度为150的一个矩形

cxt.rect(10,20,100,150)这个函数是用来绘制一个在x,y这个点开始绘制指定宽度和高度的矩形(绘制一个轨迹)

第二种方式

canvas提供了两种方式直接绘制矩形不用先用rect绘制轨迹在用stroke和fill绘制矩形了

cxt.fillRect(x,y,w,h); 绘制实心的矩形

cxt.strokeRect(x,y,w,h); 绘制空心的矩形

绘制一个实心的矩形

//获取画布var canvas = document.getElementById('myCanvas');//获取画笔var cxt = canvas.getContext('2d');//2d画笔最常用//绘制实心的矩形cxt.fillRect(10,20,100,150);

file表示(填充)Rect表示(矩形)通过画笔用fillRect绘制一个充满的实心的矩形

绘制实心矩形：fillRect接收的参数

//绘制实心矩形cxt.fillRect(10,20,100,150);// cxt.fillRect(距离画笔左上角的距离,距离画布右上角的距离,绘制图形的宽度,绘制图形的高度)

绘制一个空心的矩形

//获取画布var canvas = document.getElementById('myCanvas');//获取画笔var cxt = canvas.getContext('2d');//2d画笔最常用//绘制空心矩形cxt.strokeRect(10,20,100,150);

表示stroke(空心)Rect(矩形)通过画笔用strokeRect绘制一个空心的矩形

绘制空心矩形：strokeRect接收的参数

//绘制空心矩形cxt.strokeRect(10,20,100,150);// cxt.strokeRect(距离画笔左上角的距离,距离画布右上角的距离,绘制图形的宽度,绘制图形的高度)

绘制圆形

基础知识

在数学中一π等于180度，两π等于360度,也就是一个圆周，而在js中数学对象中的Math.PI来表示π

cxt.arc(x,y,r,圆的起始角度,圆的终止角度,true)false为默认值表示顺时针绘制圆，true表示逆时针绘制圆绘制圆形轨迹

通过cxt.arc方法来绘制圆的轨迹然后在通过stroke或者是fill来绘制是空心的还是实心的圆

arc绘制圆形的轨迹接收的参数：cxt.arc(圆心距离画布的水平距离,圆心距离画布的竖直距离,表示圆的半径,绘制圆的起点,绘制圆的终点,表示顺时针绘制还是逆时针绘制)默认值是falsefalse表示顺时针绘制圆true表示逆时针绘制圆

绘制实心的圆形

//获取画布var canvas = document.getElementById('myCanvas');//获取画笔var cxt = canvas.getContext('2d');//2d画笔最常用//绘制圆的轨迹cxt.arc(200,200,200,0,Math.PI*2,false);//绘制实心的圆cxt.fill();//第一个参数和第二个参数表示圆的圆心//cxt.arc(圆心距离画布的水平距离, 圆心距离画布的竖直距离, 表示圆的半径, 绘制圆的起点, 绘制圆的终点, 表示顺时针绘制还是逆时针绘制)//默认值是false false表示顺时针绘制圆 true表示逆时针绘制圆//Math.PI(π) = 180°

绘制空心的圆形

//获取画布var canvas = document.getElementById('myCanvas');//获取画笔var cxt = canvas.getContext('2d');//2d画笔最常用//绘制圆的轨迹//从250,250位置开始绘制圆 圆的半径是250 在从180度多开始逆时针绘制到360度cxt.arc(250,250,250,Math.PI,Math.PI*2,true);//绘制空心的圆cxt.stroke();

绘制线段

前言

在实际生活当中是两点确定一条直线的，那么在canvas中可以用moveTo来表示绘制线段的起点，用lineTo来表示绘制线段的终点这样就可以确定一条直线了，在选择stroke或者是fill方式绘制线段，其实每次绘制图形的时候都是一个路径其实可以用beginPath来开始绘制路径在用closePath闭合当前路径，这两种方法在画图形的时候必须要写上不然会让路径连上效果不好。

基础知识

cxt.moveTo(距离画布水平方向,距离画布竖直方向)绘制线段的起始点cxt.lineTo(距离画布水平方向,距离画布竖直方向) 绘制线段的终点

cxt.lineWidth = 数值设置画笔的线宽

cxt.strokeStyle = '颜色值' 设置实心画笔的颜色

cxt.fillStyle = '颜色值' 设置空心画笔的颜色

开始绘制路径和闭合当前的路径

cxt.beginPath()开始绘制路径 （必须要写断开和上次路径之前的关系）

cxt.closePath()闭合当前的路径 （这两个函数是配套的）

设置两条线段连接处的样式

cxt.lineJoin = 'miter' 默认值cxt.lineJoin = 'round' 连接处变成圆角cxt.lineJoin = 'bevel' 连接处变成斜角

设置一条线段两端的样式

cxt.lineCap = 'butt' 默认值cxt.lineCap = 'round' 两端变圆角cxt.lineCap = 'square' 两端增加线宽的一半

square往线的两端追加长度(长度是你当前线宽的一半)上面添加5和下面添加5=当前线宽10

绘制一条线段

//获取画布var canvas = document.getElementById('myCanvas');//获取画笔var cxt = canvas.getContext('2d');//绘制开始线段路径 让画笔移动到某个点上(初始点)cxt.moveTo(20,20);//绘制结束线段路径 在让画笔移动到终点上面(最终点)cxt.lineTo(200,200);//绘制线段cxt.stroke();

绘制线段：定义线段的轨迹(先有一个初始点在有一个终点，然后就可以得出两个点了(两点之间确定一条直线)

绘制线段的路径：移动画笔到这个点用cxt.moveTo(20,20) ,再次移动到 200 200这个点cxt.lineTo(200,200) ,然后这个两个点已经是一条线段了

绘制线段：cxt.stroke()绘制空心线段 注意一般在绘制线段的时候都用stroke方式绘制线段，不会使用fill方式绘制线段的

设置画笔的样式

我们在用canvas画东西的时候分为两种绘制的方法(方法和设置画笔的属性都要对应上)

第一种：画笔.stroke绘制实心的东西

第二种：画笔.fill绘制空心的东西

设置画笔的颜色和设置画笔的宽度都是根据画笔的种类来进行设置的{1.stroke实心2.fill空心}

设置画笔的线宽

画是画笔画出来的，让画笔的线宽变粗自然就可以让线条变粗了

var canvas = document.getElementById('myCanvas');var cxt = canvas.getContext('2d');//画笔.lineWidth设置画笔的画笔的线条宽度 line(线)//设置画笔的线宽cxt.lineWidth = 10;//绘制开始线段路径cxt.moveTo(20,20);//绘制结束线段路径cxt.lineTo(200,200);cxt.stroke();

设置画笔的颜色绘制线段

var canvas = document.getElementById('myCanvas');var cxt = canvas.getContext('2d');//设置画笔的线宽cxt.lineWidth = 10;//画笔.strokeStyle设置画笔的颜色//stroke表示空心 设置空心画笔的颜色 fill表实心 设置实心画笔的颜色cxt.strokeStyle = 'pink'; //设置空心画笔的颜色// cxt.fillStyle = 'pink' //设置实心画笔的样式cxt.moveTo(20,20);cxt.lineTo(200,200);cxt.stroke();

一般绘制线条都是默认(stroke)空心的，实心线条不会显示出来没有人这样用

用线条绘制一个图形

var canvas = document.getElementById('myCanvas');var cxt = canvas.getContext('2d');cxt.strokeStyle = 'pink';cxt.lineWidth = 10;//设置两条线段连接处的样式cxt.lineJoin = 'round';cxt.beginPath();//表示开始断开路径cxt.moveTo(20,20);cxt.lineTo(20,100);cxt.lineTo(50,80);cxt.closePath()//闭合当前路径cxt.stroke();

用cxt.lineJoin = 'round'设置线条的两端样式为圆角，也可以连续用lineTo方法绘制多个线段，在绘制路径之前最好调用beginPath函数断开之前路径，cxt.closePath(); 自动把当前这个点把路径给关闭了(闭合当前路径) 这个函数有闭合路径的作用

绘制一个圆

圆也是一个路径也绘制一个新的路径时调用beginPath来闭合上一次路径

var canvas = document.getElementById('myCanvas');var cxt = canvas.getContext('2d');cxt.strokeStyle = 'pink';cxt.lineWidth = 10;cxt.beginPath();//绘制一个新的路径时必须调用beginPath函数//表示开始绘制圆的路径cxt.arc(150,150,100,0,Math.PI);cxt.closePath() //闭合当前的路径(圆也是路径也需要闭合)cxt.stroke();

绘制文字

前言

在canvas标签内不可以在内部写其他的标签和文字

那我们想让canvas标签内部有文字那该怎么办？？

canvas通过们提供了一个cxt.font这个属性内部可以写字体大小和字体的系列，然后在通过cxt.fillText()或者是cxt.strokeText()选择是绘制空心文字还是实心文字。

基础知识

cxt.font='20px微软雅黑'绘制字体的大小和系列

cxt.fillText(文字,绘制文字的x位置,绘制文字的y位置)绘制实心文字

cxt.strokeText(文字,绘制文字的x位置,绘制文字的y位置)绘制空心文字 （不常用）

设置文字和绘制文字的x水平位置的对齐方式

cxt.textAlign='center'; 居中对齐常用

cxt.textAlign='left'; 左对齐默认

cxt.textAlign='right'; 右对齐

设置文字和绘制文字的y位置的对齐方式

cxt.textBaseline='bottom'文字的最低部和绘制文字的y位置对齐

cxt.textBaseline='middle' 文字的最中间和绘制文字的y位置对齐(常用)

cxt.textBaseline='top'文字的最顶间和绘制文字的y位置对齐

cxt.textBaseline='hanging'文字的最顶间和绘制文字的y位置对齐(和top效果差不多)

文字的阴影

cxt.shadowOffsetX= 数值 设置文字阴影的水平偏移量

cxt.shadowOffsetY= 数值 设置文字阴影的竖直偏移量

cxt.shadowColor='颜色名/rgb/rgba/十六进制'设置文字阴影的颜色

cxt.shadowBlur= 数值0-1;设置文字阴影的模糊程度

cxt.measureText(文本) 测量文本的宽度（不常用）

绘制文字带有阴影

var canvas = document.getElementById('myCanvas');var cxt = canvas.getContext('2d');//绘制文字的轨迹cxt.font = '20px 微软雅黑';//设置文字的x轴水平对齐方式cxt.textAlign = 'center';//设置文字的y轴位置对齐方式cxt.textBaseline = 'middle';//设置文字的阴影样式cxt.shadowColor = 'red';//设置文字阴影的水平偏移量cxt.shadowOffsetX = 10//设置文字阴影的竖直偏移量cxt.shadowOffsetY = 10//设置文字阴影的模糊程度cxt.shadowBlur = 0.5;//绘制文字cxt.fillText('花生', 250, 30);

绘制曲线(不常用)

前言

两点之间确定一条直线，但是这个直线不一定是直线也有可能是曲线。

基础知识

绘制二次贝塞尔曲线

二次贝塞尔曲线有一个控制点 x0,y0表示 控制点的坐标cxt.quadraticCurveTo(x0,y0,x1,y1)

cxt.quadraticCurveTo(控制点的x,控制点的y,曲线终点的x,曲线终点的y)

绘制三次贝塞尔曲线

三次贝塞尔曲线有两个控制点 x0,y0 x1,y1 分别表示两个控制点的坐标cxt.quadraticCurveTo(x0,y0,x1,y1,x2,y2)cxt.quadraticCurveTo(第一个控制点的x,第一个控制点的y,第二个控制点的x,第二个控制点的y,曲线终点的x,曲线终点的y);

绘制二次贝塞尔曲线

绘制二次贝塞尔曲线(只有一个控制点叫做二次贝塞尔曲线)

绘制二次贝塞尔曲线你要有moveTo()绘制曲线起点cxt.quadraticCurveTo(控制点,终点)绘制曲线的终点 这些条件才能绘制曲线

var canvas = document.getElementById('myCanvas');var cxt = canvas.getContext('2d');cxt.beginPath();//绘制曲线的起点cxt.moveTo(20, 20);//绘制曲线的终点cxt.quadraticCurveTo(40, 40, 100, 200);cxt.stroke();

绘制三次贝塞尔曲线

绘制三次贝塞尔曲线(有两个控制点叫做三次贝塞尔曲线)

绘制三次贝塞尔曲线moveTo()绘制曲线起点cxt.quadraticCurveTo(控制点1,控制点2,终点)绘制曲线终点 这些条件才能绘制曲线

var canvas = document.getElementById('myCanvas');var cxt = canvas.getContext('2d');cxt.beginPath();//绘制曲线的起点cxt.moveTo(20, 20);//获取曲线的终点cxt.quadraticCurveTo(100, 20, 300, 200, 400, 400);cxt.stroke();