一个少女心满满的例子带你入门canvas

带你入门canvas"/>

一个少女心满满的例子带你入门canvas

本文首发于我的个人博客：/
github项目地址：
项目演示地址：/

• canvas 基本知识
  • 什么是 canvas
  • getContext
  • canvas 元素绘制图像
    • contextfill
    • contextstroke
    • 绘制矩形
    • 清除矩形区域
    • 实心圆
    • 圆弧
    • 绘制线段
    • 线性渐变
    • 径向渐变
    • 图形变形
      • 缩放
      • 旋转
      • 平移
    • 图形组合
    • 阴影
    • 图像绘制
    • 图像平铺
    • 图像裁剪
    • 绘制文字
• 准备工作
  • 分析 star 的表现和行为
  • 分析 dot 的表现和行为
  • 背景的 HTML 和 CSS
  • 设置参数以及获取 dom 对象
  • 绘制单个 star
  • 让每一个 star 动起来
  • 绘制 dot
  • 让每一个 dot 动起来
  • 鼠标移入事件监听
  • canvas 离屏渲染优化
  • 发福利

之前看到了一个很好看的canvas效果，然后拿来做我的博客背景，不少童鞋留言说求教程，并且反应说太耗内存，于是前一段我就重写了一遍，并且使用离屏渲染进行优化，效果还是挺显著的。但是因为毕竟是canvas，需要一直进行重绘，所以还是比较耗内存的，但是比优化之前已经好很多了。并且最近准备自己写插件，于是就拿这个练手了，

github地址：

代码还有很多的不足，求大神 review (づ｡◕‿‿◕｡)づ~

canvas 基本知识

什么是 canvas

canvas 是 HTML5 新定义的标签，通过使用脚本（通常是 JavaScript）绘制图形。
<canvas> 标签只是图形容器，相当于一个画布，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，相当于使用画笔在画布上画画。

默认情况下，<canvas> 没有边框和内容。默认是一个 300*150 的画布，所以我们创建了 <canvas> 之后要对其设置宽高。
我们可以通过html属性‘width’，‘height’来设置canvas的宽高，不可以通过 css 属性来设置宽高。因为通过 css 属性设置的宽高会使 canvas 内的图像按照 300*150 时的比例放大或缩小

getContext()

context 是一个封装了很多绘图功能的对象，我们在页面中创建一个 canvas 标签之后，首先要使用 getContext() 获取 canvas 的上下文环境，目前 getContext() 的参数只有 2d，暂时还不支持 3d

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas 元素绘制图像

canvas 创建图形有两种方式

context.fill()

fill() 方法填充当前的图像（路径）。默认颜色是黑色。在填充前要先使用 fillStyle 设置填充的颜色或者渐变，并且如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径（正如 closePath() 一样），然后填充该路径。

context.stroke()

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。在进行图形绘制前，要设置好绘图的样式

fillStyle()//填充的样式
strokeStyle()//边框样式
context.lineWidth()//图形边框宽度

绘制矩形

用 canvas 绘制一个矩形很简单

fillRect(x,y,width,height)  // 实心矩形 
strokeRect(x,y,width,height)        // 空心矩形

• x ：起始点的 x 坐标
• y ：起始点的 y 坐标
• width ： 矩形的宽
• height ： 矩形的高

//html代码
<canvas id="canvas"></canvas>
//script代码var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');context.fillRect(0, 0, 100, 100);context.strokeRect(120, 0, 100, 100);

显示如下：

我们可以看出，在没有设置颜色的情况下，默认是黑色的。

我们还可以通过设置 fillStyle 或者 fillStyle 改变其填充颜色。

context.fillStyle = "pink";
context.strokeStyle = "darkred";
context.fillRect(0, 0, 100, 100);
context.strokeRect(120, 0, 100, 100);

效果如下

清除矩形区域

clearRect(x,y,width,height)

• x ：清除矩形起始点的 x 坐标
• y ：清除矩形起始点的 y 坐标
• width ： 清除矩形矩形的宽
• height ： 清除矩形矩形的高

var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
context.fillRect(0, 0, 100, 100);
context.strokeRect(120, 0, 100, 100);
context.fillStyle = "pink";
context.strokeStyle = "darkred";
context.fillRect(0, 120, 100, 100);
context.strokeRect(120, 120, 100, 100);
context.clearRect( 50,50,120,120)

效果如下：

实心圆

context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
- x : 圆心的 x 坐标
- y：圆心的 y 坐标
- radius ： 半径
- starAngle ：开始角度
- endAngle：结束角度
- anticlockwise ：是否逆时针（true）为逆时针，(false)为顺时针

context.beginPath();
context.arc(300, 350, 100, 0, Math.PI * 2, true);
//不关闭路径路径会一直保留下去
context.closePath();
context.fillStyle = 'rgba(0,255,0,0.25)';
context.fill();

效果如下：

圆弧

如果不填充颜色，实心圆就是圆弧

    context.beginPath();context.arc(600, 350, 100, 0, Math.PI , true);context.strokeStyle = 'pink';context.closePath();context.stroke();context.beginPath();context.arc(300, 350, 100, 0, Math.PI , true);context.strokeStyle = 'red';//没有closePathcontext.stroke();

效果如图：

• 系统默认在绘制第一个路径的开始点为beginPath
• 如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制
• 每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分

所以说，如果第一个圆弧没有 closePath() 并且第二个圆弧没有 beginPath() 的话就是这样的效果：

绘制线段

• moveTo(x,y)：把路径移动到画布中的指定点，不创建线条
• lineTo(x,y)：添加一个新点，然后在画布中创建从该点到最后指定点的线条
• 每次画线都从 moveTo 的点到 lineTo 的点，

    context.strokeStyle = 'pink';context.moveTo(0, 0);context.lineTo(100, 100);context.stroke();*/

效果如下：

如果没有