canvas 图形的基本绘制

81 阅读 0 评论 54 点赞

我是靠谱客的博主诚心大碗，最近开发中收集的这篇文章主要介绍canvas 图形的基本绘制，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

图形的基本绘制

canvas中除了矩形以外其他所有的基本图形都是由路径构成的 canvas提供了三种操纵路径的方法。

线（canvas中的路径）

beginPath 开启一条路径
moveTo 设置起点
lineTo 执行到指定点
stroke 添加颜色
- closePath方法创建从当前点到开始点的路径。(关闭一条路径可以理解为抬笔动作)

let graphDom = document.getElementById('graph'); 
let graph = graphDom.getContext('2d'); 

graph.beginPath()
graph.moveTo(0,0)
graph.lineTo(100,100)
graph.strokeStyle = '#f40'
graph.stroke()

graph.beginPath();
graph.lineWidth="5";
graph.strokeStyle="purple"; // Purple path
graph.moveTo(0,30);
graph.lineTo(150,130);
graph.stroke();

beginPath() 方法开始一条路径，或重置当前的路径。

strokeStyle()属性设置或返回用于笔触的颜色、渐变或模式。也就是我们常说的描边。

lineWidth 属性设置或返回当前线条的宽度，以像素计。

strokeStyle 和 lineWidth 属性是公共的会影响全局的设置。因为canvas 是基于状态在画值。
closePath() 关闭路径不是结束路径只是把起点和终点连接起来闭合图形只有连接起来才能进行填充。

面(矩形、圆、圆弧)

矩形

在canvas绘制矩形除了通过点和线连接这种方式外 canvas还为我们提供了一下快捷绘制矩形点方法。下面代码中fillRect方法通过填充绘制了一个矩形 rect() 可以直接绘制一个矩形。

let graphDom = document.getElementById('graph'); 
let graph = graphDom.getContext('2d'); 
// 通过路径绘制矩形 也可以绘制任意多边形
graph.beginPath();
graph.moveTo(200,80);
graph.lineTo(200,160);
graph.lineTo(130,160);
graph.lineTo(130,80);
graph.closePath();
graph.strokeStyle = '#000';
graph.stroke();
// 填充矩形
graph.fillRect(20,20,150,100); //x, y, 宽, 高。 默认的填充颜色是黑色。
// rect绘制
graph.rect(20,20,150,100);
graph.stroke();
// graph.strokeRect(20,20,100,50)

// 补充clearRect方法清空给定矩形内的指定像素
// graph.clearRect(20,20,100,50);

通过路径绘制图形时只有closePath方法才是正真的闭合了图形lineTo回到起点并不会闭合图形只是视觉上闭合了closePath方法必须调用

fillRect(x,y,width,height)方法绘制"已填充"的矩形。默认的填充颜色是黑色。

rect(x,y,width,height) 方法会创建一个矩形。

clearRect(x,y,width,height) 方法清空给定矩形内的指定像素。

strokeRect((x,y,width,height) 绘制一个矩形是stroke和rect方法的合并

参数x和y是绘制图形的起点坐标 width,height分别表示宽和高

圆、圆弧

let gardenDom = document.getElementById('garden'); 
let garden = gardenDom.getContext('2d'); 
garden.beginPath();
garden.arc(100,75,50,0,2*Math.PI);
garden.stroke();

garden.beginPath();
garden.moveTo(20,20);  // 创建开始点
garden.lineTo(100,20); 
garden.arcTo(150,20,150,70,30)
garden.lineTo(150,120);
garden.stroke();
garden.closePath()