canvas基础讲解加示例

举报
肥学 发表于 2022/06/19 23:03:48 2022/06/19
【摘要】 目录标题 技术栈样例介绍1样例2样例3 点击直接资料领取 之前有收到小伙伴们的留言说,以前有的实战站项目写的还可以,你能不能从基础教教让他零基础也能上手。也不是什么难题。我就准备了今...


技术栈

之前其实有介绍过,只是没有给示例我们再来说说他。

canvas元素是HTML5中新出现的,我们可以将其当做一个像素级的画布,它

允许我们绘制直线、圆、矩形等基本形状,以及图像和文字。使用canvas元素, 可以实时渲染图形、游戏动画或其他虚拟图像,而且它已经为快速绘图做过优化了。各大主流浏览器都已经支持GPU加速的2Dcanvas渲染,因此,使用canvas绘制出的游戏动画运行速度会很快。

它内部封装的函数:

rect( x, y, width, height )   绘制矩形

fillRect( x, y, width, height )  绘制被填充的矩形

strokeRect( x, y, width, height )  绘制矩形(无填充)

clearRect( x, y, width, height ) 清除指定的矩形内的像素



fill()  填充当前绘图(路径)

stroke() 绘制已定义的路径

beginPath()  起始(重置)当前路径

moveTo( x, y )  将笔触移动到指定的坐标(x,y)

lineTo( x, y )  绘制一条从当前位置到指定的坐标(x,y)的直线

clip()  从原始画布剪切任意形状和尺寸的区域

quadraticCurveTo()  创建二次贝塞尔曲线

bezierCurveTo()   创建三次贝塞尔曲线

arc( x, y, radius, startAngle, endAngle, anticlockwise)  绘制圆或圆弧

arcTo( x1, y1, x2, y2, radius)  根据给定点画圆弧,再以直线连接两个点

isPointInPath( x, y )  检测指定的点是否在当前路径中,在则返回true。



fillStyle  设置或返回用于填充绘画的颜色、渐变或模式

strokeStyle  设置或返回用于笔触的颜色、渐变或模式

shadowColor  设置或返回用于阴影的颜色

shadowBlur   设置或返回用于阴影的模糊级别

shadowOffsetX  设置或返回阴影与形状的水平距离

shadowOffsetY  设置或返回阴影与形状的垂直距离



lineCap  设置或返回线条的结束点样式(butt、round、square)

lineJoin  设置或返回当两条线交汇时,边角的类型(bevel、round、miter)

lineWidth  设置或返回当前的线条宽度

miterLimit  设置或返回最大斜接长度



createLinearGradient( x0, y0, x1, y1 )  创建线性渐变

createPattern( image/canvas/video, repeat )  在指定的方向内重复绘制指定的元素

createRadialGradient( x0, y0, r0, x1, y1, r1 ) 创建径向渐变

addColorStop( stop, color )  规定渐变对象中的颜色和停止位置



font  设置或返回文本内容的当前字体属性(和css的font一样)

textAlign  设置或返回文本内容的当前对齐方式

textBaseline  设置或返回在绘制文本时使用的当前文本基线

fillText( text, x, y )  在画布上绘制“被填充”的文本

strokeText( text, x, y )  在画布上绘制文本(无填充)

measureText( text )  返回包含指定文本宽度的对象(属性width获取宽度)



drawImage( image/canvas, x, y )、drawImage( image/canvas, x, y, width, height )、drawImage( image/canvas, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )  在画布上绘制图像、画布或视频



createImageData( width, height )、createImageData(imageData)  绘制ImageData对象

getImageData( x, y, width, height )  返回ImageData对象,该对象为画布上指定的矩形复制像素数据。

putImageData( ImageData, x, y )、putImageData( imageData, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )  把图像数据放回画布上。

width  返回ImageData对象的宽度

height  返回ImageData对象的高度

data  返回一个对象,包含指定的ImageData对象的图像数据



globalAlpha  设置或返回绘图的当前alpha或透明度

globalCompositeOperation  设置或返回新图像如何绘制到已有的图像上。



scale( x, y )  缩放当前绘图

translate( x, y )  重新设置画布上的(0,0)位置

rotate( angle )  选择当前绘图,单位为“弧度”,角度转弧度公式( degrees*Math.PI/180transform( m11, m12, m21, m22, dx, dy )  替换绘图的当前转换矩阵

setTransform()  将当前转换重置为单元矩阵,然后运行transform()



save()  保存当前环境的状态

restore()  恢复之前保存过的路径状态和属性



getContext('2d')  获取2d对象

toDataURL()  将canvas转换成图片,返回地址



  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129

样例介绍1

在这里插入图片描述

  <canvas width="500px" height="300px" id="canvas"></canvas>
	<script>
		//	1. 获取canvas元素对象
		var canvas=document.getElementById("canvas");
//			2. 通过元素对象创建画布对象
		var context=canvas.getContext("2d");
		console.log(context);
		/*
			3. 使用context画布对象的API 来绘制图形
			绘制矩形:
				fillRect(x,y,width,height) - 绘制实心矩形
					x,y表示绘制图形的起始坐标值 - 相对于画布的左上点
					width - 表示绘制矩形的宽度
					height- 表示绘制矩形的高度
				strokeRect(x,y,width,height) - 绘制空心矩形
					x,y表示绘制图形的起始坐标值 - 相对于画布的左上点
					width - 表示绘制矩形的宽度
					height- 表示绘制矩形的高度
		*/
		context.fillRect(10,10,100,100);
		context.strokeRect(120,10,100,100);
	</script>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

样例2

在这里插入图片描述

<canvas width="500" height="300" id="canvas"></canvas>
	
<script>
    var canvas=document.getElementById("canvas");
	var context=canvas.getContext("2d");
	/*
		fillStyle - 设置实心图形样式
			单词
			#XXX
			rgb(r,g,b)
		strokeStyle - 设置空心图形样式
		注意:设置样式一定要在绘制图形之前
	*/
	context.fillStyle="blue";
	context.fillRect(10,10,100,100);
	context.strokeStyle="red";
	context.strokeRect(120,10,100,100);
</script>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

样例3

请添加图片描述

<script>
    var canvas=document.getElementById("canvas");
	var context=canvas.getContext("2d");
	var n;
//	第一行的矩形绘制
	/*for(var i=0;i<8;i+=2){
		context.fillRect(100*i,100*0,100,100);
	}
//  第二行的矩形绘制
	for(var i=0;i<8;i+=2){
		context.fillRect(100*(i+1),100*1,100,100);
	}
//	第三行的矩形绘制
	for(var i=0;i<8;i+=2){
		context.fillRect(100*i,100*2,100,100);
	}
//	第四行的矩形绘制
	for(var i=0;i<8;i+=2){
		context.fillRect(100*(i+1),100*3,100,100);
	}*/
	
	setInterval(function(){
		for(var j=0;j<8;j++){	
			for(var i=0;i<8;i+=2){
				j%2==0?n=i:n=i+1;// 如果j%2==0表示是奇数行
				context.fillStyle=rgb();
				context.fillRect(100*n,100*j,100,100);
			}
		}
	},200);
	function rgb(){
		var r=Math.floor(Math.random()*256);
		var g=Math.floor(Math.random()*256);
		var b=Math.floor(Math.random()*256);
		return "rgb("+r+","+g+","+b+")";
	}
</script>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

点击直接资料领取

如果你在学习python或者Java哪怕是C遇到问题都可以来给我留言,因为在学习初期新手总会走很多弯路,这个时候如果没有有个人来帮一把的话很容易就放弃了。身边很多这样的例子许多人学着学着就转了专业换了方向,不仅是自身问题还是没有正确的学习。所以作为一个过来人我希望有问题给我留言,说不上是帮助就是顺手敲几行字的事情。

这里有python,Java学习资料还有有有趣好玩的编程项目,更有难寻的各种资源。反正看看也不亏。

文章来源: blog.csdn.net,作者:肥学,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/jiahuiandxuehui/article/details/125354129

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200