canvas

.YoIo

已于 2024-05-11 16:43:09 修改

阅读量594

点赞数 21

文章标签： html5

于 2024-05-11 16:41:08 首次发布

本文链接：https://blog.csdn.net/2401_84341405/article/details/138714921

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一 canvas是什么？

<canvas>是画布的意思
<canvas> 是HTML5中的标签，它是一个容器，可以使用JS在其中绘制图形或文字。
<canvas> 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能
<canvas>拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
注意：尽量不要用css样式给<canvas>设置宽高，否则画布会拉伸会导致失真

1、canvas 语法和属性

语法：

<canvas id="can" width="300px" height="300px"></canvas>

    var can = document.querySelector('#can')  //获得画布
    var ctx = can.getContext('2d');  //2d要小写

1.1 canvas兼容的浏览器

在这里插入图片描述

2.基本的绘画路径

canvas坐标从左上角0,0开始。x 向右增加， y 向下增加
canvas说明图：
在这里插入图片描述

2.1 画图

1、开始绘画：ctx.beginPath()
2、绘制的起点：ctx.moveTo(x,y)
3、经过点：ctx.lineTo(x,y)
4、绘制结束：ctx.closePath() 关闭路径，将终点与起点链接起来
5、确定画笔的样式，使用设置好的画笔描边或者填色

ctx.fillStyle=‘值’ 确定填充的颜色,默认值是黑色
ctx.fill() 开始填充

ctx.lineWidth=“值” 画笔的粗细
ctx.strokeStyle=“值” 画笔的颜色
ctx.stroke() 开始描边

示例图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #can{
            background-color: #eee;
        }
    </style>
</head>
<body>
    <canvas id="can" width="200px" height="200px"></canvas>
</body>
<script>
    var can = document.querySelector('#can')
    var ctx = can.getContext('2d');
    ctx.beginPath()
    ctx.moveTo(50,50)
    ctx.lineTo(100,50);
    ctx.lineTo(100,100);
    ctx.lineTo(50,100);
    ctx.closePath()
    ctx.fillStyle='red'
    ctx.fill()
</script>
</html>

3. 快速绘制一些常见图像

3.1 矩形

x,y 起始坐标。w,h 宽高
ctx.rect(x,y,w,h) // 确定路径
ctx.strokeRect(x,y,w,h); // 确定路径并描出来
ctx.fillRect(x,y,w,h); // 确定路径并填充出来

示例图：
在这里插入图片描述

3.2 快速画圆

ctx.arc(x,y,r,sa,ea,true/false)：
x、y为圆心坐标，r为半径， sa、ea分别为起始角度和结束角度，
true是逆时针画圆，false是顺时针画圆；
360度角即2PI弧度，1度就是2PI/360=PI/180弧度，
90度就是2PI/360*90=PI/2弧度(其他的角度自行计算)
示例图：

3.3 贝塞尔曲线

A. 二次贝塞尔曲线

ctx.quadraticCurveTo (cx,cy,ex,ey)
cx,cy 控制点坐标
ex,ey 结束点坐标
开始点通过moveTo去做就行
示例图：

B. 三次贝塞尔曲线

bezierCurveTo (cx1,cy1,cx2,cy2,ex,ey)
cx1,cy2 控制点1
cx2,cy2 控制点2
ex,ey 结束点坐标
开始点通过moveTo去做就行

示例图：
在这里插入图片描述

4.绘制字体

4.1 填充绘制

fillText(text,x,y,maxWidth)
text表示文字 x、y为坐标
maxWidth可选，为文字最大宽度，防止文字溢出

4.2 描边绘制

strokeText(text,x,y,maxWidth)
text表示文字 x、y为坐标
maxWidth可选，为文字最大宽度，防止文字溢出；

4.3 字体样式设置

ctx.font = “bold 40px Arial”
ctx.textAlign = “left | center | right”
注意对齐方式
ctx.textBaseline = “top | middle | bottom”
top: 四线格的最顶部线对齐起始点！
middle: 四线格的中间位置对齐起始点
bottom：四线格的底部对齐起始点

示例图：
在这里插入图片描述

5.图形组合方式

ctx.globalCompositeOperation = “某一种方式”

source-over：默认值，表示新图覆盖在旧图之上
source-atop：只绘制旧图和重叠的部分，其他透明
source-in：只绘制新图的重叠部分，其他透明
source-out：只绘制新图，重叠部分和旧图透明
destination-over：表示旧图覆盖在新图之上
destination-atop：只绘制新图和重叠的部分，其他透明
destination-in：只绘制旧图的重叠部分，其他透明
destination-out：只绘制旧图，重叠部分和新图透明
lighter：旧图与新图都绘制，重叠部分混色处理
xor：旧图和新图重叠处做透明处理
copy：只绘制新图形，不绘制旧图形

6.图形阴影

shadowColor ：设置或返回用于阴影的颜色
shadowBlur ：设置或返回用于阴影的模糊级别,大于 1 的正整数，数值越高，模糊程度越大
shadowOffsetX：设置或返回阴影距形状的水平距离
shadowOffsetY：设置或返回阴影距形状的垂直距离

7.图形的绘制

ctx.drawImage(imgage对象,x,y)
ctx.drawImage(imgage对象,x,y,w,h)
w,h 以压缩方式设置图形的宽高
ctx.drawImage(imgage对象,x,y,w,h,rx,ry,rw,rh)
x,y 图片上的坐标
w,h 要裁剪的宽高
rx,ry 画布上的坐标
rw,rh 要显示的图片的宽高

8.图片平铺

var image = new Image();
image.src = ‘图片路径’;

image.onload = function(){
			// 平铺方式  repeat 完全平铺  repeat-x/y  no-repeat
			var pat = ctx.createPattern(image,"repeat"); 
			ctx.fillStyle = pat;
			ctx.fillRect(x,y,w,h);
			//x,y开始坐标 w,h宽高
		}