canvas学习笔记
<body>
<!--1.在body中创建一个canvas标签-->
<!--
注意点
canvas标签有默认的宽度和高度
默认的宽度是300px
默认的高度是150px
-->
<canvas></canvas>
<script>
// 2.通过js代码拿到canvas标签
let oCanvas = document.querySelector("canvas");
// 3.从canvas标签中获取到绘图工具
let oCtx = oCanvas.getContext("2d");
// 4.通过绘图工具在canvas标签上绘制图形
// 4.1设置路径的起点
oCtx.moveTo(50, 50);
// 4.2设置路径的终点
oCtx.lineTo(200, 50);
// 4.3告诉canvas将这些点连接起来
oCtx.stroke();
</script>
</body>
- 不能通过CSS设置画布的宽高
- 通过CSS设置画布宽高会在默认宽高的基础上拉伸
- 如果需要设置canvas宽高请通过元素行内属性width和height设置
<canvas width="500" height="500"></canvas>
- 线条默认宽度和颜色
- 通过canvas绘制的线条默认宽度是1px, 颜色是纯黑色
- 但是由于默认情况下canvas会将线条的中心点和像素的底部对齐,
- 所以会导致显示效果是2px和非纯黑色问题。
- 解决方式，y轴偏移0.5像素
oCtx.moveTo(50, 50.5);
oCtx.lineTo(200, 50.5);
canvas线条相关属性
/*
1.线条相关属性
lineWidth: 线条宽度
strokeStyle: 线条颜色
lineCap: 线末端类型：(butt默认)、round、square
* */
let oCanvas = document.querySelector("canvas");
let oCtx = oCanvas.getContext("2d");
// 修改线条的高度
oCtx.lineWidth = 50;
// 修改线条的颜色
oCtx.strokeStyle = "blue";
// 修改线条的两端样式
oCtx.lineCap = "round";
oCtx.moveTo(50, 50);
oCtx.lineTo(200, 50);
oCtx.stroke();
/*
1.多根线条注意点
如果是同一个路径, 那么路径样式会被重用(第二次绘制会复用第一次的样式)
如果是同一个路径, 那么后设置的路径样式会覆盖先设置的路径样式
2.如何给每根线条单独设置路径样式?
每根线条都开启一个新的路径即可
* */
let oCanvas = document.querySelector("canvas");
let oCtx = oCanvas.getContext("2d");
oCtx.moveTo(50, 50);
oCtx.lineTo(200, 50);
oCtx.lineWidth = 20;
oCtx.strokeStyle = "blue";
oCtx.stroke();
oCtx.beginPath(); // 重新开启一个路径
oCtx.moveTo(50, 100);
oCtx.lineTo(200, 100);
oCtx.lineWidth = 10; // 重新设置当前路径样式
oCtx.strokeStyle = "red";
oCtx.stroke();
oCtx.beginPath(); // 重新开启一个路径
oCtx.moveTo(50, 150);
oCtx.lineTo(200, 150);
oCtx.lineWidth = 15; // 重新设置当前路径样式
oCtx.strokeStyle = "green";
oCtx.stroke();
绘制简单图形
/*
1.closePath
自动创建从当前点回到起始点的路径
2.lineJoin
设置相交线的拐点样式 miter(默认)、round、bevel
* */
let oCanvas = document.querySelector("canvas");
let oCtx = oCanvas.getContext("2d");
oCtx.moveTo(50, 50);
oCtx.lineTo(200, 50);
oCtx.lineTo(200, 200);
oCtx.lineTo(50, 200);
// 注意点: 如果通过lineTo来闭合图形, 那么是不能很好的
// oCtx.lineTo(50, 50);
oCtx.closePath();
oCtx.lineWidth = 10;
oCtx.lineJoin = "round";
// 注意点: 默认情况下不会自动从最后一个点连接到起点
oCtx.stroke();
图形填充
- 对于同一路径,在填充的时候回遵循非零环绕规则
- 从当前的区域拉出一条直线, 遇到顺时针相交的线就+1, 遇到逆时针相交的线就-1
- 最终计算的结果如何是0就不填充, 如果不是0就填充
/*
1.stroke
绘制已定义的路径
2.fill
填充已定义的路径
*/
let oCanvas = document.querySelector("canvas");
let oCtx = oCanvas.getContext("2d");
oCtx.moveTo(100, 100);
oCtx.lineTo(300, 100);
oCtx.lineTo(300, 300);
oCtx.lineTo(100, 300);
oCtx.closePath();
/*
Ctx.moveTo(150, 150);
Ctx.lineTo(250, 150);
Ctx.lineTo(250, 250);
Ctx.lineTo(150, 250);
*/
Ctx.moveTo(250, 150);
Ctx.lineTo(150, 150);
Ctx.lineTo(150, 250);
Ctx.lineTo(250, 250);
oCtx.closePath();
/*
注意点: 只要没有手动开启新的路径, 那么使用的都是默认路径
如果都是默认路径, 那么设置的样式在同一个路径中都是有效的
* */
// oCtx.strokeStyle = "blue";
// oCtx.stroke();
oCtx.fill();
绘制表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制表格</title>
<style>
*{
margin: 0;
padding: 0;
}
canvas{
display: block;
margin: 300px auto;
background: #e8e9ee;
}
</style>
</head>
<body>
<canvas width="500" height="400"></canvas>
<script>
// 1.拿到canvas
let oCanvas = document.querySelector("canvas");
// 2.从canvas中拿到绘图工具
let oCtx = oCanvas.getContext("2d");
// 3.定义变量保存小方格的尺寸
let gridSize = 20;
// console.log(oCanvas.offsetWidth);
// console.log(oCanvas.offsetHeight);
// console.log(oCtx.canvas.width);
// console.log(oCtx.canvas.height);
// 4.拿到canvas的宽高
let canvasWidth = oCtx.canvas.width;
let canvasHeight = oCtx.canvas.height;
// 5.计算在垂直方向和水平方向可以绘制多少条横线
let row = Math.floor(canvasHeight / gridSize);
let col = Math.floor(canvasWidth / gridSize);
// 6.绘制垂直方向的横线
for(let i = 0; i < row; i++){
oCtx.beginPath();
oCtx.moveTo(0, i * gridSize - 0.5);
oCtx.lineTo(canvasWidth, i * gridSize - 0.5);
oCtx.strokeStyle = "#FFF";
oCtx.stroke();
}
// 7.绘制水平方向的横线
for(let i = 0; i < col; i++){
oCtx.beginPath();
oCtx.moveTo(i * gridSize - 0.5, 0);
oCtx.lineTo(i * gridSize - 0.5, canvasHeight);
oCtx.strokeStyle = "#FFF";
oCtx.stroke();
}
</script>
</body>
</html>
// 1.计算坐标系原点的位置
let originX = gridSize;
let originY = canvasHeight - gridSize;
// 2.计算X轴终点的位置
let endX = canvasWidth - gridSize;
// 3.绘制X轴
oCtx.beginPath();
oCtx.moveTo(originX, originY);
oCtx.lineTo(endX, originY);
oCtx.strokeStyle = "#000";
oCtx.stroke();
// 4.绘制X轴的箭头
oCtx.lineTo(endX - 10, originY + 5);
oCtx.lineTo(endX - 10, originY - 5);
oCtx.lineTo(endX, originY);
oCtx.fill();
// 5.计算Y轴终点的位置
let endY = gridSize;
// 3.绘制Y轴
oCtx.beginPath();
oCtx.moveTo(originX, originY);
oCtx.lineTo(originX, endY);
oCtx.strokeStyle = "#000";
oCtx.stroke();
// 4.绘制X轴的箭头
oCtx.lineTo(originX - 5, endY + 10);
oCtx.lineTo(originX + 5, endY + 10);
oCtx.lineTo(originX, endY);
oCtx.fill();
绘制折线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas折线图封装</title>
<!---->
<style>
*{
margin: 0;
padding: 0;
}
canvas{
display: block;
margin: 0 auto;
background: #e8e9ee;
}
</style>
</head>
<body>
<script>
class LineChart{
constructor(width=300, height=150){
// 1.创建canvas
this.canvas = document.createElement("canvas");
this.canvas.width = width;
this.canvas.height = height;
document.body.appendChild(this.canvas);
// 2.拿到绘图工具
this.ctx = this.canvas.getContext("2d");
}
drawGrid(gridSize=20){
let oCtx = this.ctx;
// 4.拿到canvas的宽高
let canvasWidth = oCtx.canvas.width;
let canvasHeight = oCtx.canvas.height;
// 5.计算在垂直方向和水平方向可以绘制多少条横线
let row = Math.floor(canvasHeight / gridSize);
let col = Math.floor(canvasWidth / gridSize);
// 6.绘制垂直方向的横线
for(let i = 0; i < row; i++){
oCtx.beginPath();
oCtx.moveTo(0, i * gridSize - 0.5);
oCtx.lineTo(canvasWidth, i * gridSize - 0.5);
oCtx.strokeStyle = "#ccc";
oCtx.stroke();
}
// 7.绘制水平方向的横线
for(let i = 0; i < col; i++){
oCtx.beginPath();
oCtx.moveTo(i * gridSize - 0.5, 0);
oCtx.lineTo(i * gridSize - 0.5, canvasHeight);
oCtx.strokeStyle = "#ccc";
oCtx.stroke();
}
}
drawCoor(gridSize=20){
let oCtx = this.ctx;
let canvasWidth = this.ctx.canvas.width;
let canvasHeight = this.ctx.canvas.height;
// 1.计算坐标系原点的位置
let originX = gridSize;
let originY = canvasHeight - gridSize;
// 2.计算X轴终点的位置
let endX = canvasWidth - gridSize;
// 3.绘制X轴
oCtx.beginPath();
oCtx.moveTo(originX, originY);
oCtx.lineTo(endX, originY);
oCtx.strokeStyle = "#000";
oCtx.stroke();
// 4.绘制X轴的箭头
oCtx.lineTo(endX - 10, originY + 5);
oCtx.lineTo(endX - 10, originY - 5);
oCtx.lineTo(endX, originY);
oCtx.fill();
// 5.计算Y轴终点的位置
let endY = gridSize;
// 3.绘制Y轴
oCtx.beginPath();
oCtx.moveTo(originX, originY);
oCtx.lineTo(originX, endY);
oCtx.strokeStyle = "#000";
oCtx.stroke();
// 4.绘制X轴的箭头
oCtx.lineTo(originX - 5, endY + 10);
oCtx.lineTo(originX + 5, endY + 10);
oCtx.lineTo(originX, endY);
oCtx.fill();
}
drawDot(list, dotSize=10){
let oCtx = this.ctx;
// 2.绘制数据点
for(let i = 0; i < list.length; i++){
oCtx.beginPath();
oCtx.moveTo(list[i].x - dotSize / 2, list[i].y - dotSize / 2);
oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y - dotSize / 2);
oCtx.lineTo(list[i].x + dotSize - dotSize / 2, list[i].y + dotSize - dotSize / 2);
oCtx.lineTo(list[i].x - dotSize / 2, list[i].y + dotSize - dotSize / 2);
oCtx.closePath();
oCtx.fill();
}
}
drawLine(list){
let oCtx = this.ctx;
oCtx.beginPath();
for(let i = 0; i < list.length; i++){
if(i === 0){
oCtx.moveTo(list[i].x, list[i].y);
}else{
oCtx.lineTo(list[i].x, list[i].y);
}
}
oCtx.stroke();
}
}
let list = [
{
x: 100,
y: 300
},
{
x: 200,
y: 200
},
{
x: 300,
y: 250
},
{
x: 400,
y: 100
},
];
let lineChart = new LineChart(500, 400);
lineChart.drawGrid(50);
lineChart.drawCoor(50);
lineChart.drawDot(list);
lineChart.drawLine(list);
</script>
</body>
</html>
绘制矩形
/*
第一个参数: x的坐标
第二个参数: y的坐标
第三个参数: 矩形的宽度
第四个参数: 矩形的高度
* */
oCtx.rect(100, 100, 200, 200);
oCtx.stroke();
// oCtx.fill();
oCtx.beginPath();
oCtx.rect(150, 150, 100, 100);
oCtx.strokeStyle = "blue";
oCtx.stroke();
oCtx.strokeRect(100, 100, 200, 200);
oCtx.strokeStyle = "blue";
oCtx.strokeRect(150, 150, 100, 100);
oCtx.fillRect(100, 100, 200, 200);
oCtx.fillStyle = "blue";
oCtx.fillRect(150, 150, 100, 100);
// oCtx.clearRect(0, 0, 150, 150);
let canvasWidth = oCtx.canvas.width;
let canvasHeight = oCtx.canvas.height;
oCtx.clearRect(0, 0, canvasWidth, canvasHeight);
绘制柱状图
let list = [
{
x: 100,
y: 300
},
{
x: 200,
y: 200
},
{
x: 300,
y: 250
},
];
// 2.绘制矩形
for(let i = 0; i < list.length; i++){
let barHeight = originY - list[i].y;
oCtx.fillRect(list[i].x, list[i].y, gridSize, barHeight);
}
填充渐变色
/*
1.渐变背景颜色
和普通的标签一样我们也可以给填充的图形设置线性渐变和径向渐变的背景颜色
2.设置图形渐变背景颜色步骤
2.1通过绘图工具创建渐变背景颜色
2.2指定渐变的范围
2.3将渐变背景颜色设置给对应的图形
* */
// 1.拿到canvas
let oCanvas = document.querySelector("canvas");
// 2.从canvas中拿到绘图工具
let oCtx = oCanvas.getContext("2d");
// 1.创建一个渐变的方案
/*
可以通过x0,y0 / x1,y1确定渐变的方向和渐变的范围
* */
let linearGradient = oCtx.createLinearGradient(100, 100, 300, 300);
/*
第一个参数是一个百分比 0~1
第二个参数是一个颜色
* */
linearGradient.addColorStop(0, "green");
linearGradient.addColorStop(0.5, "pink");
linearGradient.addColorStop(1, "blue");
// oCtx.createRadialGradient();
// oCtx.fillStyle = "blue";
oCtx.fillStyle = linearGradient;
oCtx.fillRect(100, 100, 200, 200);
绘制圆弧
// 1.拿到canvas
let oCanvas = document.querySelector("canvas");
// 2.从canvas中拿到绘图工具
let oCtx = oCanvas.getContext("2d");
/*
x, y: 确定圆心
radius: 确定半径
startAngle: 确定开始的弧度
endAngle: 确定结束的弧度
Boolean: 默认是false, false就是顺时针绘制, true就是逆时针绘制
context.arc(x, y, radius, startAngle, endAngle, Boolean);
* */
// oCtx.arc(100, 100, 100, 0, Math.PI);
// oCtx.arc(100, 100, 100, 0, Math.PI, true);
oCtx.arc(100, 100, 100, 0, Math.PI * 2);
oCtx.stroke();
绘制扇形
// 1.拿到canvas
let oCanvas = document.querySelector("canvas");
// 2.从canvas中拿到绘图工具
let oCtx = oCanvas.getContext("2d");
oCtx.moveTo(100, 100);
oCtx.arc(100, 100, 100, 0, Math.PI/2);
oCtx.closePath();
// oCtx.stroke();
oCtx.fillStyle="deeppink"
oCtx.fill();
绘制饼图
// 1.拿到canvas
let oCanvas = document.querySelector("canvas");
// 2.从canvas中拿到绘图工具
let oCtx = oCanvas.getContext("2d");
// 1.计算圆心的位置
let rx = oCtx.canvas.width/2;
let ry = oCtx.canvas.height/2;
let startAngle = 0;
for(let i = 1; i <= 4; i++){
let endAngle = i * Math.PI/2;
oCtx.beginPath();
oCtx.moveTo(rx, ry);
oCtx.arc(rx, ry, 100, startAngle, endAngle);
oCtx.fillStyle = randomColor();
oCtx.fill();
startAngle = endAngle;
}
function randomColor() {
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
return `rgb(${r},${g},${b})`;
}
绘制文字
// 1.拿到canvas
let oCanvas = document.querySelector("canvas");
// 2.从canvas中拿到绘图工具
let oCtx = oCanvas.getContext("2d");
// 3.绘制参考线
let canvasWidth = oCtx.canvas.width;
let canvasHeight = oCtx.canvas.height;
oCtx.moveTo(0, canvasHeight/2);
oCtx.lineTo(canvasWidth, canvasHeight/2);
oCtx.stroke();
oCtx.moveTo(canvasWidth/2, 0);
oCtx.lineTo(canvasWidth/2, canvasHeight);
oCtx.stroke();
// 4.绘制文字
let str = "绘制文字测试";
// 通过font属性可以设置文字的大小和样式
oCtx.font = "50px 宋体";
// 通过textBaseline属性可以设置文字垂直方向的对齐方式
// 注意点: 在对齐的时候是以绘制文字的y作为参考点进行对齐的
oCtx.textBaseline = "middle";
// 通过textAlign属性可以设置文字水平方向的对齐方式
// 注意点: 在对齐的时候是以绘制文字的x作为参考点进行对齐的
oCtx.textAlign = "center";
/*
注意点:
在绘制文字的时候, 是以文字的左下角作为参考点进行绘制
* */
// oCtx.strokeText(str, canvasWidth/2, canvasHeight/2);
oCtx.fillText(str, canvasWidth/2, canvasHeight/2);
绘制图片
// 1.拿到canvas
let oCanvas = document.querySelector("canvas");
// 2.从canvas中拿到绘图工具
let oCtx = oCanvas.getContext("2d");
// 3.加载图片
let oImg = new Image();
oImg.onload = function () {
// 如果只有三个参数, 那么第一个参数就是需要绘制的图片
// 后面的两个参数是指定图片从什么位置开始绘制
// oCtx.drawImage(oImg, 100, 100);
// 如果只有五个参数, 那么第一个参数就是需要绘制的图片
// 后面的两个参数是指定图片从什么位置开始绘制
// 最后的两个参数是指定图片需要拉伸到多大
// oCtx.drawImage(oImg, 100, 100, 100, 100);
// 如果有九个参数, 那么第一个参数就是需要绘制的图片
// 最后的两个参数是指定图片需要拉伸到多大
// 第6~7个参数指定图片从什么位置开始绘制
// 第2~3个参数指定图片上定位的位置
// 第4~5个参数指定从定位的位置开始截取多大的图片
oCtx.drawImage(oImg, 50, 50, 100, 100, 100, 100, 100, 100);
}
oImg.src = "images/test.jpg";
添加事件监听
/*
因为整个canvas是一个标签, 所以只能通过监听鼠标在canvas上的位置来判断是否需要处理对应的图形
当然也可以通过第三方框架来解决交互问题
诸如: zrender.js / Knova.js /three.js / egret.js / pixi.js等等
* */
// 1.拿到canvas
let oCanvas = document.querySelector("canvas");
// 2.从canvas中拿到绘图工具
let oCtx = oCanvas.getContext("2d");
// 3.绘制矩形
let rectX = 100;
let rectY = 100;
let rectWidth = 100;
let rectHeight = 100;
oCtx.rect(rectX, rectY, rectWidth, rectHeight);
oCtx.fill();
oCtx.beginPath();
oCtx.rect(200, 200, 100, 100);
oCtx.fill();
// 4.添加点击事件
oCanvas.onclick = function (event) {
let x = event.offsetX;
let y = event.offsetY;
/*
if(x >= rectX && x <= rectX + rectWidth &&
y >= rectY && y <= rectY + rectHeight){
console.log("矩形被点击了");
}else{
console.log("矩形没有被点击");
}
*/
/*
注意点:
isPointInPath方法如果开启了一个新的路径, 那么判断的就是点是否在新的路径的图形中
* */
console.log(oCtx.isPointInPath(x, y));
扫一扫
6516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
