文章目录
一、什么是Canvas?
Canvas 最初由Apple于2004 年引入,用于Mac OS X WebKit组件,为仪表板小部件和Safari浏览器等应用程序提供支持。
后来,它被Gecko内核的浏览器(尤其是Mozilla Firefox),Opera和Chrome实现,并被网页超文本应用技术工作小组提议
为下一代的网络技术的标准元素(HTML5新增元素)。
Canvas提供了非常多的JavaScript绘图API(比如:绘制路径、矩形、圆、文本和图像等方法),与元素可以绘制
各种2D图形。
二、Canvas优缺点
1.优点
1.1 Canvas提供的功能更原始,适合像素处理,动态渲染和数据量大的绘制,如:图片编辑、热力图、炫光尾迹特效等。
1.2 Canvas非常适合图像密集型的游戏开发,适合频繁重绘许多的对象。
1.3 Canvas能够以 .png 或 .jpg 格式保存结果图像,适合对图片进行像素级的处理。
2.缺点
2.1 在移动端可以能会因为Canvas数量多,而导致内存占用超出了手机的承受能力,导致浏览器崩溃。
2.2 Canvas 绘图只能通过JavaScript脚本操作(all in js)。
2.3 Canvas 是由一个个像素点构成的图形,放大会使图形变得颗粒状和像素化,导致模糊。
3.检查浏览器是否支持Canvas。
测试 canvas.getContext() 方法的存在
三、坐标系
默认的坐标原点在元素左上角,当然,如我们上一节所讲 你可以通过形变,改变坐标原点
四、绘制矩形
1.Canvas支持两种方式来绘制矩形:矩形方法 和 路径方法。
1.1 路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
1.2 除了矩形,其他的图形都是通过一条或者多条路径组合而成的。
1.3 通常我们会通过众多的路径来绘制复杂的图形。
2.Canvas 绘图的矩形方法:
2.1 fillRect(x, y, width, height): 绘制一个填充的矩形。
2.2 strokeRect(x, y, width, height): 绘制一个矩形的边框。
2.3 clearRect(x, y, width, height): 清除指定矩形区域,让清除部分完全透明。
2.4 x 与 y 指定了在canvas画布上所绘制矩形的左上角(相对于原点)的坐标(不支持 undefined )。
<!DOCTYPE html>
<html lang="zh-CH">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
margin: auto;
}
canvas {
background-color: rgba(255, 0, 0, 0.1);
}
</style>
</head>
<body>
<!-- 如果不给宽高 默认宽300px 高150px -->
<canvas id="box" width="300" height="300">
您的浏览器不兼容Canvas,请升级浏览器
</canvas>
<script>
window.onload = function() {
const canvasEl = document.getElementById('box')
console.log('%O', canvasEl);
if (!canvasEl.getContext) return
// 获取cancas渲染上下文
let ctx = canvasEl.getContext('2d') // 2d /webgl
console.log(ctx);
// 在原点绘制一个填充的宽100px搞50px的矩形
ctx.fillStyle = 'green'; // 不设置颜色时 默认为填充黑色(如果需要设置颜色,必须写在绘制元素的前面)
ctx.fillRect(0, 0, 100, 50)
// 绘制描边的矩形
// ctx.strokeStyle = 'green';
ctx.strokeRect(100, 100, 100, 50)
// 清除指定区域的矩形
// ctx.clearRect(0, 0, 50, 25)
}
</script>
</body>
</html>
五、认识路径
1. 什么是路径?
1.1 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
1.2 路径是可由很多子路径构成,这些子路径都是在一个列表中,列表中所有子路径(线、弧形等)将构成图形。
1.3 一个路径,甚至一个子路径,通常都是闭合的。
2. 如何用路径绘制图形?
2.1 首先需要创建路径起始点(beginPath)。
2.2 然后使用画图命令去画出路径( arc 、lineTo )。
2.3 之后把路径闭合( closePath , 不是必须)。
2.4 一旦路径生成,就能通过描边(stroke)或填充路径区域(fill)来渲染图形。
3.所需函数
3.1 beginPath():新建一条路径,生成之后,图形绘制命令被指向到新的路径上绘图,不会关联到旧的路径。
3.2 closePath():闭合路径之后图形绘制命令又重新指向到 beginPath之前的上下文中。
3.3 stroke():通过线条来绘制图形轮廓/描边(针对当前路径图形)。
3.4 fill():通过填充路径的内容区域生成实心的图形(针对当前路径图形)。
六、路径-绘制直线
<!DOCTYPE html>
<html lang="zh-CH">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
margin: auto;
}
canvas {
background-color: rgba(255, 0, 0, 0.1);
}
</style>
</head>
<body>
<!-- 如果不给宽高 默认宽300px 高150px -->
<canvas id="box" width="300" height="300">
您的浏览器不兼容Canvas,请升级浏览器
</canvas>
<script>
window.onload = function() {
const canvasEl = document.getElementById('box')
if (!canvasEl.getContext) return
let ctx = canvasEl.getContext('2d')
// 0. 设置线条的属性(不设置 就会用默认的)
// ctx.lineWitdh = 10
// ctx.strokeStyle = 'green';
// 1. 创建路径起点
ctx.beginPath()
// 2. 移动画笔(确定从哪里开始画)
ctx.moveTo(0,10)
// 绘制一条从当前位置到指定 (x ,y)位置的直线
ctx.lineTo(100, 10)
// 闭合路径(不是必须写,但建议写)
ctx.closePath()
// 描边(绘制线条只能用stroke不能用fill)
ctx.stroke()
}
</script>
</body>
</html>
七、路径-绘制三角形
<!DOCTYPE html>
<html lang="zh-CH">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
margin: auto;
}
canvas {
background-color: rgba(255, 0, 0, 0.1);
}
</style>
</head>
<body>
<!-- 如果不给宽高 默认宽300px 高150px -->
<canvas id="box" width="300" height="300">
您的浏览器不兼容Canvas,请升级浏览器
</canvas>
<script>
window.onload = function() {
const canvasEl = document.getElementById('box')
if (!canvasEl.getContext) return
let ctx = canvasEl.getContext('2d')
// 描边三角形
ctx.beginPath()
ctx.moveTo(50,0)
ctx.lineTo(100, 50)
ctx.lineTo(50, 100)
// ctx.closePath()
ctx.stroke()
// 实心三角形
ctx.beginPath()
ctx.moveTo(150,0)
ctx.lineTo(200, 50)
ctx.lineTo(150, 100)
// ctx.closePath()
ctx.fill() //他会自动闭合路径
}
</script>
</body>
</html>
八、路径-绘制圆弧,圆
1. 绘制圆弧或者圆,使用arc()方法
1.1 arc(x, y, radius, startAngle, endAngle, anticlockwise),该方法有六个参数:
◼ x、y:为绘制圆弧所在圆上的圆心坐标。
◼ radius:为圆弧半径。
◼ startAngle、endAngle:该参数用弧度定义了开始以及结束的弧度。这些都是以 x 轴为基准。
◼ anticlockwise:为一个布尔值。为 true ,是逆时针方向,为false,是顺时针方向,默认为false。
2. 弧度计算
◼ arc() 函数中表示角的单位是弧度,不是角度。
◼ 角度与弧度的 JS 表达式:弧度=( Math.PI / 180 ) * 角度 ,即 1角度= Math.PI / 180 个弧度
比如:旋转90°:Math.PI / 2; 旋转180°:Math.PI ; 旋转360°:Math.PI * 2; 旋转-90°:-Math.PI / 2;
3.案例
<!DOCTYPE html>
<html lang="zh-CH">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
margin: auto;
}
canvas {
background-color: rgba(255, 0, 0, 0.1);
}
</style>
</head>
<body>
<!-- 如果不给宽高 默认宽300px 高150px -->
<canvas id="box" width="300" height="300">
您的浏览器不兼容Canvas,请升级浏览器
</canvas>
<script>
window.onload = function() {
const canvasEl = document.getElementById('box')
if (!canvasEl.getContext) return
let ctx = canvasEl.getContext('2d')
// 圆
ctx.beginPath()
ctx.arc(50, 50, 25, 0, Math.PI * 2, false)
// ctx.closePath()
ctx.stroke()
// 填充圆
ctx.beginPath()
ctx.arc(150, 50, 25, 0, Math.PI * 2, false)
// ctx.closePath()
ctx.fill()
// 圆弧
ctx.beginPath()
ctx.arc(150, 150, 25, 0, Math.PI, false)
// ctx.closePath()
ctx.stroke()
}
</script>
</body>
</html>
九、路径-绘制矩形
和上面的绘制矩形差不多,就不加图片了
<!DOCTYPE html>
<html lang="zh-CH">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
margin: auto;
background-image: url(../images/grid.png);
}
canvas {
background-color: rgba(255, 0, 0, 0.1);
}
</style>
</head>
<body>
<!-- 如果不给宽高 默认宽300px 高150px -->
<canvas id="box" width="300" height="300">
您的浏览器不兼容Canvas,请升级浏览器
</canvas>
<script>
window.onload = function() {
const canvasEl = document.getElementById('box')
if (!canvasEl.getContext) return
let ctx = canvasEl.getContext('2d')
ctx.beginPath()
// ctx.moveTo(0,0)
ctx.rect(10, 10, 100, 50)
// ctx.closePath()
// ctx.stroke()
ctx.fill()
}
</script>
</body>
</html>