是时候系统的学习之一：canvas

最新推荐文章于 2023-02-01 14:23:26 发布

Miss_LL

最新推荐文章于 2023-02-01 14:23:26 发布

阅读量779

点赞数

分类专栏： JavaScript 布局文章标签： canvas html js

本文链接：https://blog.csdn.net/Miss_LL/article/details/92020474

版权

JavaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

布局

1 篇文章 0 订阅

订阅专栏

一、什么是Canvas

没有Canvas的年代，绘图只能借助Flash，页面不得不用JavaScript和Flash进行交互，而现在可以直接用Html5的canvas元素使用JavaScript在网页上绘制图形。

Canvas指定了尺寸，可以在这个范围内任意绘制。

Canvas拥有多种绘制路径、矩形、圆形、字符以及添加图形的方法。

二、Canvas的环境

由于浏览器对HTML5标准支持不一致，所以通常在<canvas>的内部添加一些说明性HTML代码，如果不支持将显示其内部的HTML。

<canvas width="100" height="100" id="canva">
    <p>您的浏览器版本暂不支持Canvas,请进行升级</p>
</canvas>

var canvas = document.getElementById('canva');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

三、Canvas的坐标系统

Canvas的坐标系统以左上角为原点，水平向右为X轴，垂直向下为Y轴，以像素为单位，所以每个点都是非负整数。

四、绘制矩形

Canvas只支持一种原生图形的绘制：矩形。

所有其他图形都至少需要生成一种路径。

Canvas提供了几种方式绘制矩形：

描述	方法	参数
创建矩形	rect(x,y,width,height)	x：矩形左上角X坐标 y：矩形左上角的Y坐标 width：矩形的宽度，以像素计 height：矩形的高度，以像素计
绘制一个填充颜色的矩形，默认黑色	fillRect(x,y,width,height)	x：矩形左上角X坐标 y：矩形左上角的Y坐标 width：矩形的宽度，以像素计 height：矩形的高度，以像素计
绘制一个矩形边框，默认黑色	strokeRect(x,y,width,height)	x：矩形左上角X坐标 y：矩形左上角的Y坐标 width：矩形的宽度，以像素计 height：矩形的高度，以像素计
在给定的矩形内清除指定的像素，然后这块区域变完全透明	clearRect(x,y,width,height)	x：要清除的矩形左上角X坐标 y：要清除的矩形矩形左上角的Y坐标 width：要清除的矩形矩形的宽度，以像素计 height：要清除的矩形矩形的高度，以像素计

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.绘制矩形</title>
    <style>
        #canvas{
            width: 500px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        window.onload = function () {
            var canvas = document.getElementById('canvas');
            if (!canvas.getContext) return;
            var context = canvas.getContext('2d');
            context.strokeRect(20,20,100,100);
            context.fillRect(30,30,80,80);
            context.clearRect(40,40,60,60);
        }
    </script>
</body>
</html>

五、绘制路径

图形的基本元素是路径。

路径通过不同颜色和宽度的线段、曲线相连形成不同形状的点集合。

一个路径，甚至一个子路径，都是闭合的。

步骤：

1. 创建路径起始点 -- beginPath()

2. 使用画图命令画出路径 -- moveTo()等

3. 路径封闭 -- closePath()

4. 一旦路径生成即可通过描边或填充路径来渲染图形 -- fill()

描述	方法	参数
填充当前绘图	fill()
绘制已定义的路径	stroke()
起始一条路径，或重置当前当前路径	beginPath()
把路径以定到画布指定点	moveTo(x,y)	x：路径的目标位置的X坐标 y：路径的目标位置的Y坐标
创建从当前点到起始点的路径	closePath()
添加一个新点，然后再画布中创建从该点到最后指定点的线条	lineTo(x,y)	x：路径的目标位置的X坐标 y：路径的目标位置的Y坐标
从原始画布剪切任意形状和尺寸的区域	clip()
创建二次贝赛尔曲线	quadraticCurveTo(cpx,cpy,x,y)	cpx：贝塞尔控制点的X坐标 cpy：贝塞尔控制点的Y坐标 x：结束点的X坐标 y：结束点的Y坐标
创建三次贝塞尔曲线	bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)	cp1x：第一个贝塞尔控制点的 x 坐标 cp1y：第一个贝塞尔控制点的 y 坐标 cp2x：第二个贝塞尔控制点的 x 坐标 cp2y：第二个贝塞尔控制点的 y坐标 x：结束点的 x 坐标 y：结束点的 y 坐标
创建弧、曲线（用于创建圆形或部分圆）	arc(x,y,r,sAngle,eAngle,counterclockwise)	x：圆的中心的 x 坐标 y：圆的中心的 y 坐标 r：圆的半径 sAngle：起始角，以弧度计。（弧的圆形的三点钟位置是 0 度） eAngle：结束角，以弧度计 counterclockwise：可选，规定在逆时针还是在顺时针绘图，False = 顺时针，true = 逆时针
创建两切线之间的弧、曲线	arcTo(x1,y1,x2,y2,r)	x1：弧的起点的 x 坐标 y1：弧的起点的 y 坐标 x2：弧的终点的 x 坐标 y2：弧的终点的 y 坐标 r：弧的半径
如果指定的点位于当前路径中，则返回true,否则返回false	isPointInPath(x,y)	x：测试的 x 坐标 y：测试的 y 坐标

延伸：

一次贝塞尔曲线

二次贝塞尔曲线

三次贝塞尔曲线

六、添加样式、颜色和阴影

描述	方法	参数
用于填充绘画的颜色、渐变或模式	fillStyle	color\|gradient\|pattern color：css颜色值 gradient：用于填充绘图的渐变对象（线性或放射性） pattern：用于填充绘图的 pattern 对象
用于笔触的颜色、渐变或模式	strokeStyle	color\|gradient\|pattern color：css颜色值 gradient：用于填充绘图的渐变对象（线性或放射性） pattern：用于填充绘图的 pattern 对象
用于阴影的颜色	shadowColor	color：css颜色值
用于阴影的模糊级别	shadowBlur	number：模糊级别数
阴影距形状的水平距离	shadowOffsetX	number：正值或负值，定义阴影与形状的水平距离
阴影距形状的垂直距离	shadowOffsetY	number：正值或负值，定义阴影与形状的垂直距离

创建线性渐变	createLinearGradient(x0,y0,x1,y1)	`x0：渐变开始点的 x 坐标 y0：渐变开始点的 y 坐标 x1：渐变结束点的 x 坐标 y1：渐变结束点的 y 坐标`
在指定方向上重复指定的元素（元素可以是图片、视频，或者其他 <canvas> 元素）	cratePattern(image,"repeat\|repeat-x\|repeat-y\|no-repeat")	`image：规定要使用的图片、画布或视频元素 "repeat：默认。该模式在水平和垂直方向重复 repeat-x：该模式只在水平方向重复 repeat-y：该模式只在垂直方向重复 no-repeat：该模式只显示一次（不重复） "`
创建放射状、环形的渐变	createRadialGradient(x0,y0,r0,x1,y1,r1)	`x0：渐变的开始圆的 x 坐标 y0：渐变的开始圆的 y 坐标 r0：开始圆的半径 x1：渐变的结束圆的 x 坐标 y1：渐变的结束圆的 y 坐标 r1：结束圆的半径`
规定渐变对象中的颜色和停止位置	addColorStop(stop,color)	stop：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置 color： css 颜色值

线条的结束端点样式	lineCap	"butt\|round\|square" " butt：默认。向线条的每个末端添加平直的边缘 round：向线条的每个末端添加圆形线帽 square：向线条的每个末端添加正方形线帽 "
两条线相交时，所创建的拐角类型	lineJoin	"bevel\|round\|miter" " bevel：创建斜角 round：创建圆角 miter：默认。创建尖角 "
当前的线条宽度	lineWidth	number：当前线条的宽度，以像素计
最大的斜接长度	miterLimit	number：正数。规定最大斜接长度。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示

七、绘制文字

描述	方法	参数
当前字体属性	font
当前对齐方式	textAlign
当前文本基线	textBaseline

在画布上绘制被填充的文本	fillText()
在画布上绘制未被填充的文本	strokeText()
返回包含指定文本宽度的对象	measureText()

八、绘制图片

描述	方法	参数
在画布上绘制图像、画布或视频	drawImage	img：规定要使用的图形、画布或视频 sx：可选，开始剪切的X坐标位置 sy：可选，开始剪切的Y坐标位置 swidth：可选，被剪切图形的宽度 sheight：可选，被剪切图形的高度 x：在画布上放置图形的X坐标位置 y：在画布上放置图形的Y坐标位置 width：可选，要使用的图形的宽度（伸展或缩小图像） height：可选，要使用的图形的高度（伸展或缩小图像）

返回ImageData对象的宽度	width
返回ImageData对象的高度	height
返回一个对象，其包含指定的ImageData对象的图像数据	data

创建新的、空白的ImageData对象	crateImageData()
返回ImageData对象，该对象为画布上指定的矩形复制像素数据	getImageData()
把图像数据（从指定的ImageData对象）放回画布上	putImageData()

九、变形

描述	方法	参数
重新映射画布上的（0,0）位置	translate()	x：左右偏移量 y：上下偏移量移动中心是坐标原点。
缩放当前绘图至更大或更小	scale()	scaleWIdth：缩放当前绘图宽度（1=100% 2=200%） scaleHeight：缩放当前绘图高度（1=100% 2=200%）
旋转当前绘图	rotate()	angel：旋转角度，以弧度计，如需将角度转换为弧度，以degrees * Matn.PI/180公式计算。顺时针方向旋转，旋转中心是坐标原点。
替换绘图的当前转换矩阵	transform()	a：水平缩放绘图 b：水平倾斜绘图 c：垂直倾斜绘图 d：垂直缩放绘图 e：水平移动绘图 f：垂直移动绘图
将当前转换重置为单位矩阵，然后运行transform()	setTransform()	a：水平旋转绘图 b：水平倾斜绘图 c：垂直倾斜绘图 d：垂直缩放绘图 e：水平移动绘图 f：垂直移动绘图

延伸：

1.translate：

2.rotate

十、合成

描述	方法	参数
设置或返回绘图当前alpha或透明值	globalAlpha	number：透明值，必须介于0.0-1.0之间
设置或返回心图形如何绘制到已有的图像上	globalCompositeOperation	等多个属性操作，略。。

十一、其他

描述	方法	参数
保存当前环境的状态	save()
返回之前报错过的路径状态和属性	restore()
	createEvent()
	getContext()
	toDataURL()

十二、动画

基本步骤：

1. 在绘制每一帧动画之前，需要清空所有canvas -- clearRect()

2. 保存canvas状态

3. 绘制动画图形

4. 恢复canvas状态

参考网址：

1. https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage

2. https://www.runoob.com/w3cnote/html5-canvas-intro.html

3. api参考：http://www.w3school.com.cn/tags/html_ref_canvas.asp

小例子：

https://download.csdn.net/download/miss_ll/11251876

Miss_LL

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
是时候系统的学习之一：canvas

目录一、什么是Canvas二、Canvas的环境三、Canvas的坐标系统四、绘制矩形五、绘制路径六、添加样式、颜色和阴影七、绘制文字八、绘制图片九、变形十、合成十一、其他十二、动画参考网址：小例子：一、什么是Canvas没有Canvas的年代，绘图只能借助Flash，页面不得不用JavaScript和Flash进行交互，...
复制链接

扫一扫