Canvas 入门笔记

小豪boy

已于 2022-04-09 00:06:23 修改

阅读量611

点赞数

分类专栏： HTML从0开始文章标签： canvas

于 2022-04-08 23:20:52 首次发布

本文链接：https://blog.csdn.net/qq_34771938/article/details/124052643

版权

HTML从0开始专栏收录该内容

19 篇文章 2 订阅

订阅专栏

1. canvas 简介

应用场景：游戏、背景动画。

学习教程网址：Canvas教程 - Web API 接口参考 | MDN

canva 是画布，js 控制画布 canvas 绘制图形。

2. canvas 的基本绘制步骤

2.1 HTML部分

<canvas id='canvas' width="400" height="300">标签内部文字默认不显示</canvas>
canvas 画布标签，默认大小：300*150。
具有两个属性：width、height。
设置大小不能通过样式，只能是修改属性。

2.2 JavaScript 部分

1. 获取canvas元素

var canvas = document.getElementById('canvas');

2. 渲染上下文（类似于画笔）

var ctx = canvas.getContext('2d');
<canvas> 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。

3. 了解一下画布栅格

在我们开始画图之前，我们需要了解一下画布栅格（canvas grid）以及坐标空间。
栅格的起点为左上角（坐标为（0,0）），所有元素的位置都相对于原点定位。
所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。

4. 绘制矩形

canvas提供了三种方法绘制矩形：

绘制一个填充的矩形
// fillRect(x, y, width, height) 
// x 矩形起始点的 x 轴坐标。
// y 矩形起始点的 y 轴坐标。
// width 矩形的宽度。
// height 矩形的高度。
ctx.fillRect(10,10,200,100);
绘制一个矩形的边框
// strokeRect(x, y, width, height) 
ctx.strokeRect(220,10,100,100);
清除指定矩形区域，让清除部分完全透明
// clearRect(x, y, width, height) 
ctx.clearRect(20,20,100,70);

5. 绘制路径

路径绘制图形需要一些额外的步骤：

首先，你需要创建路径起始点。
然后你使用画图命令去画出路径。
之后你把路径封闭。
一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

示例：

//绘制距离---找第一个点的坐标 moveTo(x,y) 
ctx.moveTo(10,10);
ctx.lineTo(110,10);
ctx.lineTo(60,160);
//闭合路径
//方法1：再次找一个结束的点
// ctx.lineTo(10,10);

//方法2：函数closePath()
ctx.closePath();

//描边 通过线条来绘制图形轮廓
// ctx.strokeStyle='red';
// //描边加粗
ctx.lineWidth=6;
ctx.stroke();


//fillStyle = color 设置图形的填充颜色
// ctx.fillStyle='red';  //注意：想修改填充的图形的颜色，需要先设置颜色，再fill() 填充
ctx.fillStyle='#999';//颜色：red  #000  rgb()  rgba() 
//  填充
ctx.fill();

//绘制图片
//再次绘制图片 会保留上面设置的颜色 fillStyle=''  可以在绘制的时候重新再次设置

常用的函数：

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径（抬笔）。
ctx.beginPath()
将一个新的子路径的起始点移动到(x，y)坐标。
ctx.moveTo(x, y);
使用直线连接子路径的最后的点到x,y坐标。
ctx.lineTo(x, y);
闭合路径之后图形绘制命令又重新指向到上下文中。
ctx.closePath()
通过线条来绘制图形轮廓。
ctx.stroke()
通过填充路径的内容区域生成实心的图形。
ctx.fill()
设置图形的填充颜色。
//color：red  #000  rgb()  rgba() 
ctx.fillStyle = color;
设置图形轮廓的颜色。
ctx.strokeStyle = color;
设置线条宽度。
// value 描述线段宽度的数字。
ctx.lineWidth = value;

6.绘制圆弧或者圆

绘制圆弧或者圆，通常使用 arc()方法：

// arc(x, y, radius, startAngle, endAngle, anticlockwise)  true表示：逆时针
// x, y 是绘制圆的中心点；r半径
// startAngle开始的角度   endAngle结束的角度
// boolean画圆弧的方向  (默认是顺时针)  默认false
//注意：arc()函数中表示角的单位是弧度，不是角度。
// 角度与弧度的js表达式:  弧度 = (Math.PI/180)*角，（0-2*Math.PI）
ctx.arc(200,200,100,0,Math.PI,true);

示例：

// 头
ctx.arc(200,200,100,0,2*Math.PI);
ctx.stroke();

//嘴巴
ctx.beginPath();
ctx.arc(200,200,70,0,Math.PI);
ctx.stroke();

//左眼睛
ctx.beginPath();
ctx.arc(150,160,20,0,2*Math.PI);
ctx.stroke();

//右眼睛
ctx.beginPath();
ctx.arc(250,160,20,0,2*Math.PI);
ctx.stroke();

7. 绘制圆环

对圆的边框设置线宽；
使用重描达到嵌套效果；

ctx.beginPath();
ctx.arc(150,200,50,0,2*Math.PI);
ctx.lineWidth=6;
ctx.stroke();

ctx.beginPath();
ctx.arc(230,200,50,0,2*Math.PI);
ctx.lineWidth=6;
ctx.strokeStyle='green';
ctx.stroke();


//黑色的 嵌套绿色的 
ctx.beginPath();
ctx.arc(150,200,50,1.5*Math.PI,2*Math.PI);
ctx.lineWidth=6;
ctx.strokeStyle='#000';
ctx.stroke();