【怕啥弄啥系列】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)

原文发布于微信公众号 - 神仙朱(skying-zhu)

原文发表时间:2018-12-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券