记录canvas画头像、添加头像装饰（粗糙版本）

Amodoro

已于 2022-08-31 13:49:30 修改

阅读量286

点赞数

分类专栏： canvas 文章标签：前端

于 2022-08-31 13:48:47 首次发布

本文链接：https://blog.csdn.net/qq_40230735/article/details/126622367

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

静态头像装饰

<body>
	<canvas id="canvas" width="120" height="120">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
</body>
<script>
	const canvas = document.getElementById('canvas')
	if (canvas.getContext) {
    const ctx = canvas.getContext('2d')
    const zhuangshi = new Image()
    zhuangshi.src = './zhuangshi.png'
	zhuangshi.onload = function () {
      ctx.drawImage(zhuangshi, 0, 0, 120, 120)
      ctx.beginPath()
      ctx.arc(60, 60, 40, 0, Math.PI * 2)
      ctx.clip()
			const img = new Image()
			img.src = './touxiang.webp'
			img.onload = function () {
			  ctx.drawImage(img, 20, 20, 80, 80)
			}
    	}
	}
</script>

动态头像装饰

<body>
<div>
	<canvas width="200" height="200" style="z-index: 1; position: absolute;" id="canvas"></canvas>
	<div style="z-index: 2; position: absolute; width: 200px; height: 200px">
		<img style="position: absolute;width: 200px;height: 200px;" src="https://wimg.588ku.com/gif620/21/02/23/ed427f99137fa0be1bd5df4cf3766619.gif" />
	</div>
</div>
</body>
<script>
  const canvas = document.getElementById('canvas')
	const ctx = canvas.getContext('2d')

	const img = new Image()
	img.src = './touxiang.webp'
	img.onload = function () {
    	ctx.beginPath()
		ctx.arc(106, 114, 50, 0, Math.PI * 2)
		ctx.clip()
		ctx.drawImage(img, 55, 62, 100, 100)
  }
</script>