canvas初探 —— 实现手机壳效果（适用于移动端）

最新推荐文章于 2021-07-17 13:49:26 发布

mirror29

最新推荐文章于 2021-07-17 13:49:26 发布

阅读量4.6k

点赞数 5

分类专栏： Javasript 文章标签： canvas

本文链接：https://blog.csdn.net/mirror29/article/details/82784929

版权

这篇博客介绍了如何使用canvas在移动端实现手机壳定制效果。作者首先概述了辞职后的学习经历，然后详细阐述了实现思路，包括绘制手机壳图案、加载图片、处理移动和缩放。在代码部分展示了html、js和css的实现细节。最后，作者分享了在实现过程中遇到的问题和解决方案，以及项目花费的时间，并提供了github地址和联系方式。

摘要由CSDN通过智能技术生成

前言

很久没写博客，辞职了一段时间换了一份工作，没有了大屏幕写起来不方便就不想写了哈哈，这段时间学习完了ES6，Node的一些基础，近期在学习vue，但感觉不是很扎实，准备第二次学习的时候再做记录。

这次遇到一个案例感觉比较有趣，给手机壳绘上图片传给后台做成手机壳，技术上使用了canvas来实现该效果，初次使用canvas，遇到了很多问题，包括传说中的异步问题以及如何将两个canvas进行合成等等，经过这个案例也算是对canvas有了一个比较清楚的认识。

实现思路

(ps:电脑无法演示缩放功能)

1.通过canvas绘制出手机壳图案，并加载后台图片

2.获取系统相册，图片加载后通过canvas绘制到手机壳上，超出手机壳的部分不显示，露出手机壳摄像头部分，并在下方滚动条中显示；如不上传也可用系统中图片

3.移动或者缩放时先重新绘制手机壳，利用回调函数，清空图案再重新绘制图案，最后再清空一遍图案（不清空会导致移动时图案会跑到手机壳上方，即手机壳摄像头位置被遮盖）

代码部分

html

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/amazeui.min.css">
		<link rel="stylesheet" href="css/show.css" />
		<!-- <script src="http://192.168.31.246:8081/target/target-script-min.js#anonymous"></script> -->
		<script>
            window.onload = function(){
				MoveFun1();
			}
			
		</script>
	</head>
	
	<body>

		<div class="container-fluid">
			<div class="row">
				<div class="col text-center">
					<h4>展示</h4>
				</div>
			</div>
			<div class="row" id="show">
				<div class="col">
					<img src="img/ix.png" id="backImg" / >
				    <canvas id="myCanvas" height="414px;" width="200px"></canvas>
				    <canvas id="upCanvas" ></canvas>

				</div>
				
			</div>
		</div>

			<div class="foot" id="foot">
				<div class="am-scrollable-horizontal scroll">
					<table class="am-table am-table-bordered am-table-striped am-text-nowrap">
						
							<input id="file" type="file" style='display: none;'>				
						　　<!--用for属性绑定file控件--> 　　
						　　<label for="file" class="upload">　　 				　　　　　　
						　　　　<img src="./img/custom.png" alt="" class="am-fl am-img-responsive"> 　　				　　
						　　</label> 

						<ul class="footImage">
							<!-- <li class="images">
								<img src="img/pic1.png"/ class="am-img-responsive">
							&l