用canvas给自己的博客园加背景（一）

canvas入门篇

最近在折腾canvas，写一点笔记。

注：本文面向canvas入门的前端，写的如有纰漏请指出，不喜勿喷。

这一系列的文章最终结果是做出本人博客的动态背景，不过凡事都要循序渐进，我们先从最简单的绘制开始。

本人接触电脑的第一个绘图工具就是windows自带的画图。画图的流程很简单，选好填充颜色、线条颜色、粗细，用鼠标选好形状就可以画出来了，而且每次重新改变填充颜色、线条颜色、粗细只会对后面的绘制的形状起作用（听起来就是废话，但是我们绘制canvas的思路也是如此）。

创建canvas画布

首先要有一块画布，我们才能往里面画东西。

我们要在html里添加一个canvas标签，在js里获取这个元素，而canvas的主要属性有width height，我们可以用js修改这两个属性让canvas布满整个屏幕，达到自适应，然后就是获取2d上下文：

<canvas id="canvas"></canvas>

var canvas = document.querySelector("#canvas");
//宽高自适应
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//获取2d上下文
var ctx = canvas.getContext("2d");

/*为了看清楚画布，我们可以描个边*/
#canvas{
    border: 1px solid black;
}
/*有习惯做reset的可以做全一点，这里把body布满页面*/
body{
    margin: 0;
    padding: 0;
}

绘图的画布到这里就创建完了，目前canvas的背景是透明的（可以按f12看一下）。

绘制样式

想要绘制形状，先要有绘制样式，当然canvas有默认的绘制样式，我主要介绍自己常用的，有兴趣的可以自己去深入了解。

• fillStyle填充属性，支持十六进制，rgb，rgba填充，颜色名称
• strokeStyle描边属性，支持十六进制，rgb，rgba填充，颜色名称
• lineWidth线条属性，数值

修改这些属性要通过上下文对象ctx

ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.lineWidth = 3;

绘制形状

和画图一样，我们绘制的形状有线、矩形、弧和多边形，圆是包含在弧里面的，这些API也很容易看得懂。

开始路径

这点非常重要，虽然没有这行代码也可以绘制图形，但是每次图形的绘制会在上一个图形的结束点开始绘制，这明显不是我们想要的结果，所以务必在每个形状绘制前加入这么一行代码。

ctx.beginPath();

矩形

矩形是默认的形状，有自己的fillRect()和strokeRect()。

//填充矩形：ctx.fillRect(x坐标,y坐标,width宽度,height高度);
ctx.fillRect(50,50,100,100);
//描边矩形：ctx.strokeRect(x坐标,y坐标,width宽度,height高度);
ctx.strokeRect(50,50,100,100);

圆（弧）

弧只是路径，光靠arc()只能定义路径，需要用fill()和stroke()才能填充和绘制。

//圆路径：ctx.arc(x坐标,y坐标,r半径,开始弧度,结束弧度,布尔值);
ctx.arc(100,100,50,Math.PI/180*0,Math.PI/180*360,false);
//填充圆
ctx.fill();
//描边圆
ctx.stroke();

线

线是路径，两点成线，所以要定义开始点moveTo()，目标点lineTo()。

//定义线的起始点
ctx.moveTo(460,460);
//定义目标点
ctx.lineTo(500,500);
//折线
ctx.lineTo(400,600);
//折线
ctx.lineTo(200,600);
//绘制线条
ctx.stroke();

多边形

多边形其实也是线，一开始我们说要用beginPath()重新定义开始的点，而绘制多边形则要闭合路径closePath()。

//绘制等腰三角形
ctx.beginPath();
ctx.moveTo(200,200);
ctx.lineTo(150,300);
ctx.lineTo(250,300);
//闭合路径
ctx.closePath();
ctx.stroke();

本节先讲基础的绘制知识，下一节内容会介绍requestAnimationFrame()动画。