js学习21-（canvas）

最新推荐文章于 2024-12-21 14:28:14 发布
最新推荐文章于 2024-12-21 14:28:14 发布
阅读量432 收藏
点赞数
分类专栏： 前端学习 文章标签： canvas js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42760119/article/details/107773741
版权
这篇博客详细介绍了JavaScript中Canvas的使用，包括canvas的基本元素、颜色样式和阴影、线条样式、矩形绘制、路径操作、文本与图像绘制、像素操作以及合成等。还通过多个示例，如绘制圆、线、文本、图像、视频和制作时钟，深入浅出地展示了Canvas的强大功能。
摘要由CSDN通过智能技术生成

Canvas

canvas三要素

​ id：作为唯一的标识
​ width：画布内容宽度的像素大小
​ height：画布内容高度的像素大小

注意 ：canvas仅仅只是一个画布标签，绘制内容必须使用js进行绘制

例子：

<body>
  <!--
   canvas三要素：
    id：作为唯一的标识
    width：画布内容宽度的像素大小
    height：画布内容高度的像素大小
    
   canvas仅仅只是一个画布标签，绘制内容必须使用js进行绘制
  -->
  <canvas id="canvas1" width="600" height="600">
   这里的内容，正常的画布是不显示的。
   不正常的画布是显示的，因为此时会认为canvs是自定义的标签，说明你的浏览器支持canvas
  </canvas>
  
  <script type="text/javascript">
   //1、找到画布对象
   var canvas1 = document.querySelector("#canvas1")
   console.log([canvas1])
   //2、上下文对象，即画笔
   var  ctx = canvas1.getContext("2d")
   console.log(ctx)
   
   //3、绘制矩形
   ctx.rect(50,50,300,300)
   //4、填充
   ctx.fillstyle="aqua"      //设置画笔样式
   ctx.fill()                //进行填充
   
   //5、描边，渲染路径
   ctx.lineWidth = 20;
   ctx.strokeStyle ="#EA625B"
   ctx.stroke()
  </script>
 </body>

颜色、样式和阴影

属性描述
fillStyle设置或返回用于填充绘画的颜色、渐变或模式。
strokeStyle设置或返回用于笔触的颜色、渐变或模式。
shadowColor设置或返回用于阴影的颜色。
shadowBlur设置或返回用于阴影的模糊级别。
shadowOffsetX设置或返回阴影与形状的水平距离。
shadowOffsetY设置或返回阴影与形状的垂直距离。
方法描述
createLinearGradient()创建线性渐变（用在画布内容上）。
createPattern()在指定的方向上重复指定的元素。
createRadialGradient()创建放射状/环形的渐变（用在画布内容上）。
addColorStop()规定渐变对象中的颜色和停止位置。
参数值
参数描述
image规定要使用的模式的图片、画布或视频元素。
repeat默认。该模式在水平和垂直方向重复。
repeat-x该模式只在水平方向重复。
repeat-y该模式只在垂直方向重复。
no-repeat该模式只显示一次（不重复）。

线条样式

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

矩形

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

路径

方法描述
fill()填充当前绘图（路径）。
stroke()绘制已定义的路径。
beginPath()起始一条路径，或重置当前路径。
moveTo()把路径移动到画布中的指定点，不创建线条。
closePath()创建从当前点回到起始点的路径。
lineTo()添加一个新点，然后在画布中创建从该点到最后指定点的线条。
clip()从原始画布剪切任意形状和尺寸的区域。
quadraticCurveTo()创建二次贝塞尔曲线。
bezierCurveTo()创建三次贝塞尔曲线。
arc()创建弧/曲线（用于创建圆形或部分圆）。
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设置或返回新图像如何绘制到已有的图像上。

定义和用法

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

默认值：source-over
JavaScript 语法：context.globalCompositeOperation=“source-in”;

属性值

值描述
source-over默认。在目标图像上显示源图像。
source-atop在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。
source-out在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。
destination-over在源图像上显示目标图像。
destination-atop在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。
destination-in在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。
destination-out在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。
lighter显示源图像 + 目标图像。
copy显示源图像。忽略目标图像。
xor使用异或操作对源图像与目标图像进行组合。

其他

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

例子

1、绘制圆

<body>
		<canvas id="canvas1" width="600" height="600"></canvas>
		
		<script type="text/javascript">
			var canvas1 = document.querySelector("#canvas1")
			var ctx = canvas1.getContext('2d')
			console.log([ctx])
			
			//默认为false代表顺时针，true代表逆时针。 
			//参数含义分别为：圆心的横纵坐标，半径，起始弧度，终止弧度
			ctx.arc(300,300,100,0,2*Math.PI,true)
			
			ctx.fillStyle = "#FF6700"
			ctx.fill()
			ctx.stroke()
			
		</script>
	</body>

2、绘制线

<body>
		
		<canvas id="canvas1" width="600" height="600"></canvas>
		
		<script type="text/javascript">
			var canvas1 = document.querySelector("#canvas1")
			var ctx = canvas1.getContext('2d');
			
			//设置开始路径
			ctx.beginPath()
			//设置绘制的起始点
			ctx.moveTo(50,50)
			//设置经过某个位置
			ctx.lineTo(50,300)
			ctx.lineTo(300,300)
			//设置结束路径
			ctx.closePath()
			
			//绘制路径
			ctx.strokeStyle = "#000000"
			ctx.lineWidth = 10
			ctx.lineCap = "round"   //设置起始路径的的线段边缘为圆角
			ctx.stroke()
		</script>
	</body>

3、绘制文本

<body>
		<canvas id="canvas1" width="800" height="600"></canvas>
		
		<script type="text/javascript">
			var canvas1 = document.querySelector("#canvas1")
			var ctx = canvas1.getContext("2d")
			console.log(ctx)
			ctx.font = "30px 楷体"
			
			//设置阴影
			ctx.shadowBlur = 20;
			ctx.shadowColor = "#000000"
			ctx.shadowOffsetX = 10
			ctx.shadowOffsetY = 10
			
			
			/*ctx.fillText("hello canvas",100,100)
			ctx.strokeText("灵魂拷问：宇宙为什么这么大 & 中午吃啥",100,200)*/
			var x = 800;
			setInterval(function(){
				//清空画布
				ctx.clearRect(0,0,800,600)
				x -= 10;
				if (x<-100) {
					x=600
				}
				ctx.fillText("hello canvas",x,100)
				ctx.strokeText("灵魂拷问：宇宙为什么这么大 & 中午吃啥",x,200)
			},30)
			
		</script>
	</body>

4、绘制图像

<body>
		<canvas id="canvas1" width="1000" height="600"></canvas>
	
		<script type="text/javascript">
			var canvas1 = document.querySelector("#canvas1")
			var ctx = canvas1.getContext("2d")
			
			//绘制图像
			//ctx.drawImage(图片对象,x位置,y位置)
			//ctx.drawImage(图片对象,x位置,y位置，宽度，高度)
			//ctx.drawImage(图片对象,图像裁剪的位置x，图像裁剪的位置y，裁剪的宽度，裁剪的高度，x位置,y位置，宽度，高度)
			var img = new Image();
			img.src = "img/6.jpg"
			
			var img2 = new Image();
			img2.src = "img/1.jpg"
			
			
			//图片载入数据后再绘制内容.下面这种写法是没有先后顺序的，主要看网速，谁载入谁就先显示
			img.onload = function(){
				ctx.drawImage(img,50,50)
				console.log(img)
				
				ctx.fillText("琦遇前端ing",250,80)
			}
			
			img2.onload = function(){
				ctx.drawImage(img2,400,50)
				console.log(img2)
				

			}
			
			//把它们写在一个载入函数中就有了先后顺序了
			/*img.onload = function(){
				ctx.drawImage(img,50,50)
				console.log(img)
			
				var img2 = new Image();
				img2.src = "img/1.jpg"
				ctx.drawImage(img2,400,50)
				console.log(img2)
				
			}*/
			
		</script>
	
	</body>

5、绘制视频

<body>
		<canvas id="canvas1" width="1000" height="400"></canvas>
		<video width="800" height="" src="img/video.mp4" controls="controls"></video>
	
	
		<script type="text/javascript">
			var video = document.querySelector("video")
			var canvas1 = document.querySelector("#canvas1")
			
			var ctx = canvas1.getContext('2d')
			var interId;
			video.onplay = function(){
				interId = setInterval(function(){
					ctx.clearRect(0,0,800,600),
					ctx.fillRect(0,0,800,600),
					ctx.drawImage(video,0,0,800,600),
					
					
					ctx.font = "20px 微软雅黑",
					ctx.strokeStyle = "#999",
					ctx.strokeText("琦遇前端ing",40,40)
					
				},16)
			}
			video.onpause = function(){
				clearInterval(interId);
			}
		</script>
	</body>

6、变形-移动

<body>
		<canvas id="canvas1" width="800" height="600"></canvas>
		
		<script type="text/javascript">
			var canvas1 = document.querySelector("#canvas1")
			var cxt = canvas1.getContext("2d")
			
			//移动即是translate，会将整个坐标尺进行移动
			
			cxt.fillStyle = "hotpink"
			cxt.fillRect(0,0,100,100)
			
			cxt.translate(300,0)
			cxt.fillStyle = "deepskyblue"
			cxt.fillRect(100,100,300,100)
			
		</script>
	
	</body>

7、变形-旋转

<body>
		<canvas id="canvas1" width="800" height="600"></canvas>
		
		<script type="text/javascript">
			var canvas1 = document.querySelector("#canvas1")
			var cxt = canvas1.getContext("2d")
			
			cxt.fillStyle = "deepskyblue"
			cxt.fillRect(100,100,300,100)
			
			cxt.rotate(Math.PI/4)
			
			cxt.fillStyle = "deepskyblue"
			cxt.fillRect(100,100,300,100)
			
			
			
		</script>
	</body>

8、变形-缩放

<body>
		<canvas id="canvas1" width="800" height="600"></canvas>
		
		<script type="text/javascript">
			var canvas1 = document.querySelector("#canvas1")
			var cxt = canvas1.getContext("2d")
			
			cxt.fillStyle = "hotpink"
			cxt.fillRect(0,0,100,100)
			
			//保留环境的状态（画笔的状态）
			cxt.save()
				
			//缩放
			cxt.scale(2,4)
			
			cxt.fillStyle = "deepskyblue"
			cxt.fillRect(100,0,300,100)
			
//			cxt.scale(0.5,0.25)
			//恢复之前保留的画笔状态
			cxt.restore()
			cxt.fillRect(0,150,100,100)
			
			
		</script>
	</body>

9、制作时钟

	<body>
		<canvas id="canvas1" width="800" height="600"></canvas>
		
		<script type="text/javascript">
			var canvas1 = document.querySelector("#canvas1")
			var cxt = canvas1.getContext("2d")
			
			function renderClock(){
				
				cxt.clearRect(0,0,800,600)
				
				cxt.save()
				//将坐标移动到画布中央
				cxt.translate(400,300)
				cxt.rotate(-Math.PI/2)
				
				cxt.save()
				
				//绘制表盘
				//开始路径
				cxt.beginPath()
				cxt.arc(0,0,200,0,2*Math.PI)
				cxt.strokeStyle = "darkgray"
				cxt.lineWidth = 10
				cxt.stroke()
				//结束路径
				cxt.closePath()
				
//				cxt.restore()
//				cxt.save()
				
				//绘制大刻度
				for (var i=0;i<12;i++) {
					cxt.rotate(Math.PI/6)
					cxt.beginPath()
					cxt.moveTo(180,0)
					cxt.lineTo(200,0)
					cxt.strokeStyle = "darkgray"
					cxt.lineWidth = 10
					cxt.stroke()
					cxt.closePath()
				
				}
				cxt.restore();
				cxt.save();
				
				//绘制小刻度
				for (var j=0;j<60;j++) {
					cxt.rotate(Math.PI/30)
					cxt.beginPath()
					cxt.moveTo(187,0)
					cxt.lineTo(200,0)
					cxt.strokeStyle = "darkgray"
					cxt.lineWidth = 5
					cxt.stroke()
					cxt.closePath()
				}
				
				cxt.restore()
				cxt.save()
				
				
				var time = new Date();
				
				var hour = time.getHours()
				var min = time.getMinutes()
				var sec = time.getSeconds()
				//如果时间大于12，则直接减去12
				hour = hour>12?hour-12:hour
				console.log(hour+":"+min+":"+sec)
				
				//绘制秒针
				cxt.beginPath()
				//根据秒针的时间进行旋转
				cxt.rotate(2*Math.PI/60*sec)
				cxt.moveTo(-30,0)
				cxt.lineTo(170,0)
				cxt.strokeStyle = "red"
				cxt.lineWidth = 2
				cxt.stroke()
				cxt.closePath()
				
				cxt.restore()
				cxt.save()
				
				//绘制分针
				cxt.beginPath()
				//根据时针的时间进行旋转
				cxt.rotate(2*Math.PI/60*min+2*Math.PI/3600*sec)
				cxt.moveTo(-20,0)
				cxt.lineTo(130,0)
				cxt.strokeStyle = "#000000"
				cxt.lineWidth = 4
				cxt.stroke()
				cxt.closePath()
				
				cxt.restore()
				cxt.save()
				
				
				//绘制时针
				cxt.beginPath()
				//根据时针的时间进行旋转
				cxt.rotate((2*Math.PI/12*hour) + (2*Math.PI/60/12*min) + (2*Math.PI/12/60/60*sec))
				cxt.moveTo(-10,0)
				cxt.lineTo(80,0)
				cxt.strokeStyle = "#000000"
				cxt.lineWidth = 6
				cxt.stroke()
				cxt.closePath()
				
				cxt.restore()
				cxt.save()
				
				cxt.beginPath()
				cxt.arc(0,0,10,0,2*Math.PI)
				cxt.fillStyle = "#000000"
				cxt.fill()
				cxt.closePath()
			
				
				cxt.restore()
				cxt.restore()
			
			}
			
			setInterval(function(){
				
				renderClock()
				
			},1000)
			
			
		</script>
	</body>

效果：
在这里插入图片描述

html2canvas.js
10-12
将html的标签转化为canvas（画布）的js插件，可以结合canvas2image.js实现将一个img标签截图并下载的功能
javascript学习-canvas
qq_43368682的博客
08-03 923
canvas 简介 html5中canvas标签用于绘制图像。不过canvas标签本身没有绘制能力，是图形的容器，需要用脚本完成绘制。getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。getContext(“2d”) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。 canvas三要素 id:作为唯一的标识 width:画布内容宽度的像素大小（与style的宽度和高度是有区别） height:画布内容高度的像素大小 canvas仅仅只是1个画布标签，要绘制
前端图形开发canvas入门
最新发布
m0_74825699的博客
12-21 641
Canvas 是 HTML5 新增的一个元素，它可以用于在网页上绘制图像、动画和其他视觉效果。Canvas 可以看作是一个画布，我们可以在这个画布上绘制各种图形和文本。Canvas 有很多优点，比如它的性能非常出色，可以实现非常复杂的交互效果，而且它的兼容性也非常好。
html5--js函数在canvas中的应用
weixin_33941350的博客
12-20 127
html5--js函数在canvas中的应用 总结： 1、script中的函数写了要调用 2、rgb（）这样的模式的色彩比较适合做变量 3、body的onload事件 4、带参函数 效果： 代码： 1 <!doctype html> 2 <html> 3 <head> 4 <me...
JavaScript：canvas图像操作
前端御书房
10-19 6976
JavaScript：canvas图像操作，持续更新选中……
js学习之canvas的基础与应用(一)，web开发工具
2401_84182842的博客
04-07 1580
首先这个标签的兼容性是非常好的，除了ie9一下的浏览器外，其余的都支持这个标签。我们在使用画布时，首先需要的就是在浏览器上的html上创建这样一个标签。由于是画布很显然的我们需要去设置它的宽高以便于我们能在上面画东西。创建好后我们还需要创建一个上下文对象才能对画布进行作画.getContext(‘2d’)将其写在我们获取到的dom节点上即可开始。及下面的代码。下面就来了解具体画的东西，线段，圆等。
微信小程序ec-canvas
03-10
微信小程序是一种轻量级的应用开发平台，主要针对移动端，它允许开发者通过JavaScript、WXML（微信小程序标记语言）和WXSS（微信小程序样式语言）来构建应用。在小程序的开发过程中，`ec-canvas` 是一个重要的组件，...
vue-canvas-poster 海报合成
08-13
综上所述，“vue-canvas-poster”是一个结合Vue.js、Canvas和JavaScript技术的海报合成组件，提供了丰富的功能和良好的用户体验。开发者可以通过学习和使用这个项目，深入理解Vue组件化开发和Canvas绘图，同时掌握...
ec-canvas.zip
02-24
<canvas id="myChart" canvas-id="myChart" style="width: 100%; height: 400rpx;"></canvas> ``` 然后，在对应的js文件中，引入Echarts库，并初始化图表。在onLoad函数中，我们可以加载数据并创建Echarts实例： `...
前端项目-javascript-canvas-to-blob.zip
09-03
这个“前端项目-javascript-canvas-to-blob.zip”包含了一个示例项目，帮助开发者理解并应用这一功能。 该项目的核心在于`canvas.toBlob()`方法。这个方法接收一个回调函数作为参数，当转换完成时，会将生成的Blob...
image-manipulation-canvas:带画布的Javascript图像处理库
05-21
ImageManipulation是一个简单的Javascript库（无依赖项），可通过以canvas元素替换图像并处理其直接源内容来以某些方式来操作图像。 从许多方面来说，这都是学习如何操作图像和图像数据本身的实验，但是对于支持IE...
js截图 最新版html2canvasv.js
01-03
包含 html2canvasv.js html2canvasv.min.js html2canvasv.svg.js html2canvasv.svg.min.js
JS用Canvas元素进行HTML绘图
05-23
JS用Canvas元素进行HTML绘图 Canvas用法示例
js-canvas基本介绍
辉生活-记录程序生活的点滴。
04-28 1467
###1. canvas（画布） 是HTML 5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形 默认宽高为300px*150px 基本概念和方法入门推荐： https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial ###2.渲染上下文 元素只是创造了一个固定大小的画布，要想在它上面绘制内容，我们需要...
JavaScript canvas
司马懿的西山居
12-09 2141
简介HTML5 <canvas> 是绘制 图形/图像 的容器。它本身并没有绘制能力，您必须使用脚本来完成实际的绘图任务（通常是 JavaScript）。如果浏览器不支持<canvas>的话，会显示<canvas>标签内定义的元素。例如，下面代码在不支持的<canvas>浏览器下就会忽略<canvas>标签，显示<p>标签。<canvas id="canvas" width="500" height=
js学习之canvas的基础与应用(二)
domino~~的博客
08-18 312
js学习之canvas的基础与应用(二) 在上一部分介绍了一部分的canvas的基础，那么接下来就将剩余的一部分的canvas的内容。 1.阴影 ctx.shadowOffsetX 设置向x方向上的阴影 ctx.shadowOffsetY 设置向y方向上...
canvasJS
weixin_30613727的博客
11-19 360
转载于:https://www.cnblogs.com/jinhh/p/9983969.html
JavaScript 绘制 canvas
stanwuc的博客
01-17 345
CANVAS Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等 一、canvas 支持 浏览器支持 canvas 的话里面的html元素就不会显示，不支持的话p标签里面的内容就能看到了 <canvas id="test-stock" width="300" height="200"> <p>Curren...
JavaScript青少年简明教程：canvas（画布）元素入门
cnds123的专栏
08-07 1329
JavaScript青少年简明教程：canvas（画布）元素
深入探究JavaScript后端绘图技术 - backend-canvas
标题：“backend-canvas”描述：“backend-canvas”标签：“JavaScript”压缩包子文件的文件名称列表：backend-canvas-main 针对以上信息，我们将重点探讨与“backend-canvas”相关联的IT知识点，尤其是在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值