html的画布

在网页中，我们把用于绘制图形的特殊区域也称为“画布”，网页设计师可以在该区域义绘制自定的图形样式。

画布的使用方法

1.创建画布

<canvas id="画布名称" width="数值" height="数值">您的浏览器不支持canvas(当浏览器不支持画布标签会弹出此内容)
</canvas>

2.获取画布

使用getElementById()方法可以获取网页中的画布对象。
语法格式：

var canvas = document.getElementById('cavs');

3.准备画笔

有了画布之后，要开始绘图，还需要准备一只画笔，这支画笔就是context对象。context对象也被称为绘制环境，通过该对象，可以在画布中绘制图形。
基本语法格式：

canvas.getContext('2d');

4.确定初始位置

在绘制图形时，我们首先需要确定从哪里下“笔”，这个下“笔”的位置就是初始位置。在平面中（2d），初始位置可以通过“x，y”的坐标轴来表示。在画布中从最左上角“0，0”开始，x轴向右增大， y轴向下增大。
基本语法格式：

context.moveTo(100,100);

5.确定末端位置

连线末点用于定义一个端点，并绘制一条从该端点到初始位置的连线。在画布中使用lineTo(x,y)方法来定义连线端点。
基本语法格式：

context.lineTo(100,100);

6.描边

通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。使用画布中的stroke()方法，可以实现线的可视效果。
基本语法格式：

context.stroke();

画布的一些方法

颜色、样式和阴影

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式。
strokeStyle	设置或返回用于笔触的颜色、渐变或模式。
shadowColor	设置或返回用于阴影的颜色。
shadowBlur	设置或返回用于阴影的模糊级别。
shadowOffsetX	设置或返回阴影与形状的水平距离。
shadowOffsetY	设置或返回阴影与形状的垂直距离。

方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）。
createPattern()	在指定的方向上重复指定的元素。
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）。
addColorStop()	规定渐变对象中的颜色和停止位置。

线条样式

属性	描述
lineCap	设置或返回线条的结束端点样式。
lineJoin	设置或返回两条线相交时，所创建的拐角类型。
lineWidth	设置或返回当前的线条宽度。
miterLimit	设置或返回最大斜接长度。

矩形

方法	描述
rect()	创建矩形。
fillRect()	绘制"被填充"的矩形。
strokeRect()	绘制矩形（无填充）。
clearRect()	在给定的矩形内清除指定的像素。

路径

方法	描述
fill()	填充当前绘图（路径）。
stroke()	绘制已定义的路径。
beginPath()	起始一条路径，或重置当前路径。
moveTo()	把路径移动到画布中的指定点，不创建线条。
closePath()	创建从当前点回到起始点的路径。
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条。
clip()	从原始画布剪切任意形状和尺寸的区域。
quadraticCurveTo()	创建二次贝塞尔曲线。
bezierCurveTo()	创建三次贝塞尔曲线。
arc()	创建弧/曲线（用于创建圆形或部分圆）。arc(x,y,r,开始角,结束角,方向(默认为false,是顺时针，true为逆时针))
arcTo()	创建两切线之间的弧/曲线。
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false。

转换

方法	描述
scale()	缩放当前绘图至更大或更小。
rotate()	旋转当前绘图。
translate()	重新映射画布上的 (0,0) 位置。
transform()	替换绘图的当前转换矩阵。
setTransform()	将当前转换重置为单位矩阵。然后运行 transform()。

文本

属性	描述
font	设置或返回文本内容的当前字体属性。
textAlign	设置或返回文本内容的当前对齐方式。
textBaseline	设置或返回在绘制文本时使用的当前文本基线。

方法	描述
fillText()	在画布上绘制"被填充的"文本。
strokeText()	在画布上绘制文本（无填充）。
measureText()	返回包含指定文本宽度的对象。

图像绘制

方法	描述
drawImage()	向画布上绘制图像、画布或视频。

像素操作

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

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

合成

属性	描述
globalAlpha	设置或返回绘图的当前 alpha 或透明值。
globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上。

其他

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

常用的属性方法详解

线的样式

1、宽度

使用画布中的lineWidth属性可以定义线的宽度，该属性的取值为数值（不带单位），以像素为计量。
基本语法格式：

context.lineWidth='10';

2、描边颜色

使用画布中的strokeStyle属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色英文。
基本语法格式：

context.strokeStyle='red';

3、端点形状

默认情况下，线的端点是方形的，通过画布中的lineCap属性可以改变端点的形状。
基本语法格式：

lineCap=’属性值’

属性值	显示效果
butt（默认值）	默认效果，无端点，显示直线方形边缘。
round	显示圆形端点。
square	显示方形端点。

线的路径

闭合路径就是将我们绘制的开放路径，进行封闭处理，多点的路径闭合后会形成特定的形状。在画布中，使用closePath()方法闭合路径。
基本语法格式：

ctx.closePath();

3、填充路径

通过填充路径的内容区域生成实心的图形。
基本语法格式：

ctx.fillStyle = '#ff0'
ctx.fill();

圆的绘制方法

在画布中，使用arc()方法可以绘制圆或弧线。
基本语法格式：

arc(x,y,r,开始角,结束角,方向)

x和y： x和y表示圆心在x轴和y轴的坐标位置。
r：表示圆形或弧形的半径，用于确定图形的大小。
开始角：表示初始弧点位置。其中弧点使用数值和“Math.PI”（圆周率，可以理解为180度）表示。
结束角：结束的弧点位置，初始角的设置方式一致。
方向：分为顺时针和逆时针绘。(false和true，默认为true逆时针)

保存画布

使用画布的toblob()方法
.toBlob() 方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

//URL.createObjectURL() 使用// html代码
<input type="file" id="file">// js代码
document.querySelector('#file').onchange = function (e) {console.log(e.target.files[0])console.log(URL.createObjectURL(e.target.files[0]))
}

语法
canvas.toBlob(callback, type, encoderOptions);
参数
callback
回调函数------可获得一个单独的Blob对象参数。
type 可选------DOMString类型，指定图片格式，默认格式为image/png。
encoderOptions 可选-------Number类型，值在0与1之间，当请求图片格式为image/jpeg或者image/webp时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，则使用默认值，其余参数将被忽略。
返回值
无。
异常
SecurityError
canvas“被污染”的情况下不能使用此方法使用时，可以在点击按钮时创建个a标签，添加a标签download下载，并添加保存的格式png,a.download = name + ".png"，然后创建a.href="",给a标签添加下载的路径，并且执行a.click()，主动执行a标签的点击事件，最后执行a.remove(),移除a的点击事件即可实现点击按钮下载画布内容，下面为案例代码//获取input的值let name = ""let input = document.getElementById("srk")input.addEventListener("change", function (e) {name = this.value})//保存为图片let baocun = document.getElementById("baocun")baocun.addEventListener("click", function () {canvas.toBlob(function (blob) {let a = document.createElement("a")document.querySelector("body").appendChild(a)a.download = name + ".png"a.href = URL.createObjectURL(blob)a.click()a.remove()})})

以下是三个小案例，仅供参考

画布签名板（可下载保存）

<!DOCTYPE html>
<html lang="en"><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>/* #huabu {width: 400px;height: 200px;border: 1px solid black;} */</style>
</head><body><canvas id="huabu" width="400px" height="200px" style="border:1px solid #000000;"></canvas><div><input type="text" id="srk" placeholder="请输入图片名称"><button id="baocun">保存为图片</button><button id="qingchu" onclick="clearCanvas()">清除画布</button></div><script>//获取画布let canvas = document.getElementById("huabu")console.log(canvas.getBoundingClientRect());let canvasStyle = canvas.getBoundingClientRect()let ctx = canvas.getContext("2d")let isDrawing = falselet l = canvas.offsetLeftlet h = canvas.offsetTopcanvas.addEventListener('mousedown', function (e) {isDrawing = true// ctx.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);ctx.moveTo(e.pageX - canvasStyle.x, e.pageY - canvasStyle.y);})canvas.addEventListener('mousemove', function (e) {if (isDrawing) {//ctx.lineTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);ctx.lineTo(e.pageX - canvasStyle.x, e.pageY - canvasStyle.y);ctx.strokeStyle = 'red';ctx.stroke();}})document.addEventListener('mouseup', function (e) {isDrawing = false})//获取input的值let name = ""let input = document.getElementById("srk")input.addEventListener("change", function (e) {name = this.value})//保存为图片let baocun = document.getElementById("baocun")baocun.addEventListener("click", function () {canvas.toBlob(function (blob) {let a = document.createElement("a")document.querySelector("body").appendChild(a)a.download = name + ".png"a.href = URL.createObjectURL(blob)a.click()a.remove()})})//清除画布let qingchu = document.getElementById("qingchu")qingchu.addEventListener("click", function () {canvas.width = canvas.widthcanvas.height = canvas.height})</script>
</body></html>

火柴人（带鼠标坐标显示，方便参考不同点坐标）

<!DOCTYPE html>
<html lang="en"><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>span {position: absolute;}</style>
</head><body><canvas id="cas" width="1000" height="600"></canvas><span></span><script type="text/javascript">var canvas = document.getElementById('cas')var ctx = canvas.getContext('2d');//头部ctx.beginPath();ctx.arc(400, 110, 30, 0, 2 * Math.PI, true);ctx.closePath();ctx.strokeStyle = '#ff9900';ctx.lineWidth = '3';ctx.stroke();//脖子ctx.beginPath();ctx.moveTo(400, 140);ctx.lineTo(400, 160);ctx.lineWidth = 3;ctx.stroke();//身体ctx.beginPath();ctx.moveTo(400, 160);ctx.lineTo(400, 250);ctx.lineWidth = 35;ctx.stroke();//文件夹ctx.beginPath();ctx.moveTo(350, 200);ctx.lineTo(350, 240);ctx.lineTo(450, 240);ctx.lineTo(450, 200);ctx.closePath();ctx.fillStyle = '#cc3333';ctx.fill();ctx.lineWidth = 2;ctx.stroke();//胳膊ctx.beginPath();ctx.moveTo(400, 165);ctx.lineTo(450, 200);ctx.lineTo(400, 240);ctx.lineWidth = 8;ctx.stroke();//手掌ctx.beginPath();ctx.arc(400, 240, 8, 0, 2 * Math.PI, true);ctx.fillStyle = '#ff0';ctx.fill();//腿部ctx.beginPath();ctx.moveTo(400, 250);ctx.lineTo(380, 320);ctx.lineTo(370, 380);ctx.lineWidth = 9;ctx.stroke();ctx.beginPath();ctx.moveTo(400, 250);ctx.lineTo(420, 380);ctx.lineWidth = 9;ctx.stroke();//脚ctx.beginPath();ctx.arc(360, 380, 10, 0, 1 * Math.PI, true);ctx.closePath();ctx.fillStyle = '#ff0'ctx.fill();ctx.lineWidth = '2';ctx.stroke();ctx.beginPath();ctx.arc(410, 380, 10, 0, 1 * Math.PI, true);ctx.closePath();ctx.fillStyle = '#ff0'ctx.fill();ctx.lineWidth = '2';ctx.stroke();let span = document.querySelector("span")document.addEventListener("mousemove", function (e) {span.style.top = e.pageY - canvas.offsetTop + 5 + "px"span.style.left = e.pageX - canvas.offsetLeft + 15 + "px"span.innerHTML = `${e.pageX - canvas.offsetLeft},${e.pageY - canvas.offsetTop}`})</script>
</body></html>

笑脸练习（带鼠标坐标，方便参考）

<!DOCTYPE html>
<html lang="en"><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>span {position: absolute;}</style>
</head><body><canvas id="cas" width="400" style="border: 1px solid;" height="400"></canvas><span></span><script type="text/javascript">var canvas = document.getElementById("cas")var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(100, 100, 60, 0, 2 * Math.PI, true);ctx.fillStyle = '#ff0';ctx.fill();ctx.beginPath();ctx.strokeStyle = 'black';ctx.lineWidth = 5;ctx.arc(100, 110, 25, Math.PI / 6, 5 * Math.PI / 6, false);ctx.stroke();ctx.beginPath();ctx.strokeStyle = 'red';ctx.lineWidth = 5;ctx.arc(70, 80, 15, Math.PI / 400, Math.PI, true);ctx.stroke();ctx.beginPath();ctx.strokeStyle = '#fff';ctx.lineWidth = 5;ctx.arc(130, 80, 15, Math.PI / 400, Math.PI, true);ctx.stroke();let span = document.querySelector("span")document.addEventListener("mousemove", function (e) {span.style.top = e.pageY - canvas.offsetTop + 5 + "px"span.style.left = e.pageX - canvas.offsetLeft + 15 + "px"span.innerHTML = `${e.pageX - canvas.offsetLeft},${e.pageY - canvas.offsetTop}`})  </script>
</body></html>

html画布标签的使用相关推荐

Web前端开发笔记——第二章 HTML语言第十节画布标签、音视频标签
目录一.画布标签二.音视频标签 (一)音频标签 (二)视频标签 (三)资源标签结语一.画布标签 <canvas> </canvas> 画布标签用于图形.字符等的绘制,它 ...
【canvas 图形画布标签】(使用详解)
canvas 图形画布标签 1. 如何定义一个图形画布 ? 1.1 canvas 图形画布标签的属性有哪些 ? 1.2 canvas 图形画布的基本用法有哪些 ? 1.3 如何使用 canv ...
html5使用画布标签显示wmf,在RES.web.Html5VersionController废弃后，如何做版本管理
在之前的版本,可以通过重写Html5VersionController, 在游戏一次更新后,增加v版本号,来达到修改每次加载的png.mp3.json等文件的url不同,来解决缓存的问题. 这样的好处 ...
js画布组件(canvas/canvas)
一.Canvas是什么? Canvas就是一个画布,可以进行画任何的线.图形.填充等一系列的操作,而且操作的画图就是js,所以让js编程到了嗑药的地步.另外Canvas不仅仅提供简单的二维矢量绘图,也 ...
HTML5增加的几个新的标签
HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi.... so --->支持css3强大的选择器和动画以及javascript的新的函数先来 ...
《JavaScript高效图形编程（修订版）》——6.7 画布绘制基础
本节书摘来自异步社区<JavaScript高效图形编程(修订版)>一书中的第6章,第6.7节,作者:[美]Raffaele Cecco著,更多章节内容可以访问云栖社区"异步社区& ...
python清空画布_关于python：如何清除Tkinter画布？
当我使用以下方法绘制形状时: canvas.create_rectangle(10, 10, 50, 50, color="green") Tkinter是否跟踪其创建的事实? 在 ...
Canvas画布、SVG图片
Canvas 一.canvas 1.<canvas>标签:画布标签 (height,width,半透明),本身不具备绘图能力,可以通过脚本(通常指js)来实现 width:设置画布宽度,默 ...
教你如何利用canvas画布绘制哆啦A梦
教你如何利用canvas画布绘制哆啦A梦最近一直在练习使用canvas画布标签,今天教大家如何使用canvas画布绘制哆啦A梦.如图: HTML代码: <canvas id="my_ ...

html画布标签的使用