【怕啥弄啥系列】Canvas - 基础图形绘制

2019-08-02 16:53:54 浏览数 (1)

Canvas

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

我对Canvas 的恐惧已经不是一两天的 事了，从接触到 现在，一看到 canvas 这个词，我就恐惧，害怕，浑身乏力..........

Canvas 功能很强大，可以做好酷炫的东西，但是却让我敬而远之，那么酷炫的东西一眼就能让人觉得这个东西 绝壁 很复杂......

我同样相信很多人跟我一样，存在这种想法吧

我做过好全好详细的笔记，但是看得我没脾气啊，有时做一个简单的绘图，但是忘记怎么开始了，看下笔记，却根本找不到着手点，也只能放弃......

所以打算写得通透，简单明了一些，不想讲太多太复杂的东西，让自己这个 沙比 在忘的时候，能瞬间捡起来

如何开始Canvas

1、创建 canvas 标签

2、获取到 canvas DOM 元素

3、获取 2d 渲染上下文对象，即绘画对象，所有操作 都是基于 绘画对象

基础代码如下

代码语言：javascript复制
<!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)

代码语言：javascript复制
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=数字，必须在绘制线条前设置

现在我们来绘制一条直线

代码语言：javascript复制
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

绘制空心三角形

代码语言：javascript复制
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 之后，可以 自动闭合路径，可以不用把线条移动到原点

代码语言：javascript复制
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()

绘制实心三角形，需要填充

代码语言：javascript复制
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......

不闭合弧线

代码语言：javascript复制
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")ctx.beginPath()
ctx.arc(130,130,100,0,Math.PI/2)
ctx.stroke()

跟头发一样哈哈哈哈

闭合空心弧线

代码语言：javascript复制
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()

闭合实心弧线

代码语言：javascript复制
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()

空心圆形

代码语言：javascript复制
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")ctx.beginPath()
ctx.arc(130,130,100,0,Math.PI*2)
ctx.stroke()

实心圆形

代码语言：javascript复制
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°角，四条直线，从左上角开始按顺序一个个画就可以了（当然了，从哪里开始画无所谓，但是要按顺序）

代码语言：javascript复制
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 "

代码语言：javascript复制
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"：

以矩形为例

代码语言：javascript复制
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 的 面积，那么就会剩下一部分没有被清除

代码语言：javascript复制
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")context.fillRect(100,100,200,200)
context.clearRect(100,100,150,150)
api canvas

0 人点赞