浅学CANVAS

最新推荐文章于 2024-03-02 13:59:14 发布

闭眼打键盘

最新推荐文章于 2024-03-02 13:59:14 发布

阅读量420

点赞数

本文链接：https://blog.csdn.net/a870017443/article/details/118076420

版权

之前在学习H5的时候就有遇到<canvas>那时候太天真的了，以为不会遇到需要用到的canvas的需求，就直接跳过这个技术点，没想到啊，上手项目没多久就遇到了，需求是用canvas画一张宣传海报，幸好通过后端的插件库来完成，不然就拖累项目进度了，所以就抱着亡羊补牢的心态学习canvas。

1.什么是CANVAS？

顾名思义，翻译过来就是画布;油画的意思。canvas提供了一块空白的矩形图形区域，我们可以使用特定的JavaScript API 来绘画图形。

Canvas优点：提供的功能原始，适合像素处理，动态渲染和大数据量绘制。

2<canvas>的来历

据百度，<canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。

Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 <canvas> 标记。

我们甚至可以在 IE 中使用 <canvas> 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。

目前 <canvas> 已经成为 HTML 5 草案中一个正式的标签。

3.canvas的特点

（计算机可以使用两种方式来显示图像：1.点阵文件：又名：取样图像、点阵图像、位图图像。点阵文件缩放会失真，保存起来占用空间比较大；2.矢量文件：使用数学方程，形状参数等。矢量文件中的图形元素称为对象）

canvas绘画是z轴从下到上重重叠加的（不是我之前以为的y轴从上到下，画动画的时候经常会用到的）

canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。在矩形区域的画布上，控制其每一像素，JavaScript 来绘制 2D图形，逐像素进行渲染。可以通过多种方法使用canvas 元素绘制路径、矩形、圆形、字符以及添加图像。

4.怎么使用canvas

1.向 HTML5 页面添加 canvas元素，并规定元素的 id、宽度和高度。

<canvas id="myCanvas" width="200" height="100"> IE9及其以上版本的浏览器，才支持canvas标签 提示：您的浏览器不支持canvas，请升级浏览器</canvas>。

这时候，<canvas>可以使用css来添加如背景颜色，边框及边框颜色。

#myCanvas{bgc:#red,borader:1rpx soild #pink}

但是不能在css里面添加width和height属性，canvas画布的默认大小是300*150，当在css设置画布大小时比如300*300实际是将原画布（300*150）进行了拉伸，所以会导致图像变形。所以<canvas>自带有width和height两个属性，也只有这两个属性。

2.在javascript中获取<canvas>元素

/ 获取画布元素
let canvas = document.getElementById("square");
// 获取绘制2D元素上下文
let context = canvas.getContext("2d");

3.使用上下文API绘图

1.canvas中的坐标系

canvas坐标系，从最左上角0,0开始。x向右增大， y向下增大
- 联想：CSS中的盒模型

2.API

图形属性：
fillStyle：填充颜色。
font：绘制文本的时候css字体
globalAlpha：绘制像素时添加的透明度
gloablCompositeOperation：合并新的像素点和下面的像素点
lineCap：渲染线段的末端
lineJoin：渲染顶点
lineWidth：边框的宽度
miterLimit：斜接顶点的最大长度
textAlign：文本水平对齐方式
textBaseline：文本垂直对齐方式
shadowBlur：阴影清晰度或模糊程度
shadowColor：下拉阴影的颜色
shadowOffsetX：阴影的水平偏移量
shadowOffsetY：阴影垂直偏移量
strokeStyle：边框线颜色

图形方法：

fillRect()： x坐标 y坐标宽度高度（绘制矩形）

arc()： x坐标 y坐标 r半径起始角结束角设置顺时针(false)还是逆时针(true)（圆形）

fill()：填充路径

fillRect()： x y 宽度高度

beginPath()：新路径

moveTo()：新的子路径有x，y轴

clineTo()：该点与新点通过直线连接有x，y轴

stroke()：绘制边框线

arcTo()：绘制一条直线与一段圆弧弧的起始坐标x 弧的起点坐标y 弧的结束坐标x 弧的结束坐标y 弧的半径r

bezierCurveTo()：当前子路径添加一个新点，利用三次贝塞尔曲线相连。

quadrticCurveTo()：与上面类似，只不过它使用二次贝塞尔曲线。