> 脚本语言 > >

一个例子带你入门canvas 2017-08-07 21:35　出处：清屏网　人气：　

canvas入门

github项目地址： github.com/sunshine940…

项目演示地址： sunshine940326.github.io/canvasStar/

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

github地址： github.com/sunshine940…

代码还有很多的不足，求大神 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);

显示如下：

canvas绘制矩形有填充颜色

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

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

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

效果如下

canvas绘制矩形有填充颜色 清除矩形区域 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(); 效果如下：

canvas绘制圆弧

圆弧

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

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'; //没有closePath context.stroke();