【怕啥弄啥系列】Canvas - 基础图形绘制
【怕啥弄啥系列】Canvas - 基础图形绘制
Canvas
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
我对Canvas 的恐惧已经不是一两天的 事了，从接触到 现在，一看到 canvas 这个词，我就恐惧，害怕，浑身乏力..........
Canvas 功能很强大，可以做好酷炫的东西，但是却让我敬而远之，那么酷炫的东西一眼就能让人觉得这个东西 绝壁 很复杂......
我同样相信很多人跟我一样，存在这种想法吧
我做过好全好详细的笔记，但是看得我没脾气啊，有时做一个简单的绘图，但是忘记怎么开始了，看下笔记，却根本找不到着手点，也只能放弃......
所以打算写得通透，简单明了一些，不想讲太多太复杂的东西，让自己这个 沙比 在忘的时候，能瞬间捡起来
如何开始Canvas
1、创建 canvas 标签
2、获取到 canvas DOM 元素
3、获取 2d 渲染上下文对象，即绘画对象，所有操作 都是基于 绘画对象
基础代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"></head>
<body>
<canvas id="canvas" height="400" width="400"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")
</script>
</body>
</html>坐标系统
Canvas 的坐标系统是 ，左上角，左上角，左上角，重要的事情说三遍
就是 Y 轴向下走 是增加的，和我们数学中的的坐标轴 垂直翻转了
矩形
矩形应该算比较简单的图形了，有直接的 api 可以调用
基础API了解一下
实心矩形
contxt.fillRect(x,y,w,h)
空心矩形
contxt.strokeRect(x,y,w,h)
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")
// 绘制 x=0，y=10，长=20，高=30 的实心矩形
contxt.fillRect(0,10,20,30)
// 绘制 x=0，y=10，长=20，高=30 的空心矩形
contxt.strokeRect(0,10,20,30) 线条
基础 API 了解一下
开始绘制路径，告诉canvas 绘制新路径
ctx.beginPath
设置线条起点
ctx.moveTo
设置线条终点
ctx.lineTo
设置完两点，现在将两点连起来
ctx.stroke
修改线条宽度
ctx.lineWidth=数字，必须在绘制线条前设置
现在我们来绘制一条直线
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")
// 设置线条宽度为5
context.lineWidth=5
context.moveTo(0,0)
context.lineTo(10,10)
context.stroke() 三角形
三角形其实是由线条组成的，在上面画线条的基础上，增加多一个点 即可
基础 API 了解一下
自动闭合路径
ctx.closePath
填充绘制的路径，就是画实心图形
ctx.fill
绘制空心三角形
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")context.beginPath()
context.moveTo(0,0)
context.lineTo(0,100)
context.lineTo(100,0)
// 把线条移动回原点，否则不闭合
context.lineTo(0,0)
context.stroke() 如果你最后不把线条移动回原点，三角形是不闭合的，如下图
如果使用 closePath 之后，可以 自动闭合路径，可以不用把线条移动到原点
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")context.beginPath()
context.moveTo(0,0)
context.lineTo(0,100)
context.lineTo(100,0)
context.closePath() // 或者 context.lineTo(0,0)
context.stroke() 
绘制实心三角形，需要填充
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")context.beginPath()
context.moveTo(0,0)
context.lineTo(0,100)
context.lineTo(100,0)
context.lineTo(0,0)
// 填充图形区域
context.fill() 
圆 和 圆弧
ctx.arc( x, y, radius, startAngle,endAngle, anti-clockwise)
x
圆心 x 坐标
y
圆心 y 坐标
radius
圆弧半径，一个数字
startAngle
圆弧开始角度，使用 Math.PI 作为角度单位，以 上图的 0 那条虚线为 起始位置
例如 Math.PI * 2，表示 360°
endAngle
圆弧结束角度，使用 Math.PI 作为角度单位，以 上图的 0 那条虚线为 起始位置
例如 Math.PI / 2 ，表示 90°
anti-clockwise
顺时针还是逆时针，默认为 false，即是顺时针
TIP
Math.PI 就是代表 数学 中的 π
Math.PI 表示 180 ° , Math.PI /2 就是 90 °
我的理解
所画的圆弧弧长 等于 结束角度 减去 开始角度 ，剩下的角度 所对应的 弧长
例如，开始角度是 45° ，结束角度是 90° ，结束角度 - 开始角度 = 45°
所以，最终 绘制的弧长 = 45° 所对应的圆弧
基础 API 了解一下
设置填充的颜色
ctx.fillStyle = #fff......
不闭合弧线
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")ctx.beginPath()
ctx.arc(130,130,100,0,Math.PI/2)
ctx.stroke() 
跟头发一样哈哈哈哈
闭合空心弧线
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")ctx.beginPath()
ctx.arc(130,130,100,0,Math.PI/2)
ctx.closePath()
ctx.stroke() 
闭合实心弧线
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")ctx.beginPath()
ctx.arc(130,130,100,0,Math.PI/2)
ctx.closePath()
ctx.fill() 
空心圆形
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")ctx.beginPath()
ctx.arc(130,130,100,0,Math.PI*2)
ctx.stroke() 
实心圆形
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")ctx.beginPath()
ctx.fillStyle="rgb(0, 0, 0)"
ctx.arc(130,130,100,0,Math.PI*2)
ctx.fill() 
圆角矩形
圆角矩形，没有可以直接调用的 api
但是分析一下，并不复杂，就是 四个 90°角，四条直线，从左上角开始按顺序一个个画就可以了（当然了，从哪里开始画无所谓，但是要按顺序）
var x = 120; // 圆角矩形左上角横坐标
var y = 120; // 圆角矩形左上角纵坐标
var width = 250; // 圆角矩形的宽度
var height = 250; // 圆角矩形的高度
var radius = 50; // 圆角的半径
// 开始创建新路径
context.beginPath();
// 左上角+顶边
// 绘制左上角圆角
context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
// 绘制顶边路径
context.lineTo(width - radius + x, y);
// 右上角+右边
// 绘制右上角圆角
context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
// 绘制右边路径
context.lineTo(width + x, height + y - radius);
// 右下角+下边
// 绘制右下角圆角
context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
// 绘制底边路径
context.lineTo(radius + x, height +y);
// 左下角+左边
// 绘制左下角圆角
context.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
// 闭合路径 也可使用 context.lineTo(x, y + radius);
context.closePath();
// 设置绘制的颜色
context.strokeStyle = '#188eee';
context.stroke();如果现在你想花一个胶囊，想必你已经知道怎么画了吧
绘制文本
基础 API 了解一下
实心文本
ctx.fillText( text，x，y )
空心文本
ctx.strokeText( text，x，y )
字体样式
ctx.font="60px solid "
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")ctx.font="60px solid"
// 空心，60px 的 嘿嘿嘿
ctx.strokeText("嘿嘿嘿",100,100)
ctx.font = "20px solid"
// 实心，20px 的 "哈哈哈"
ctx.fillText("哈哈哈",300,100) 
填充颜色
基础 API 了解一下
填充颜色
ctx.fillStyle="#000" :
描边颜色
ctx.strokeStyle="#000"：
以矩形为例
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")ctx.fillStyle="red"
ctx.strokeStyle="pink"
// 实心，红色，矩形
ctx.fillRect(100,100,100,100)
// 空心，粉色边框，矩形
ctx.strokeRect(300,100,100,100) 
擦除 Canvas
ctx.clearRect(x,y,w,h)
矩形区域擦除
只要设置 擦出的 起点 和 宽高 就好了
我画了宽高为 200 的矩形，但是只擦出了 150*150 的 面积，那么就会剩下一部分没有被清除
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")context.fillRect(100,100,200,200)
context.clearRect(100,100,150,150)