具体的 *** 作步骤如下：
1、首先需要准备好sketch的Measure插件，然后点击打开sketch软件，点击Plugins，选择Sketch Measure的工具栏：
2、打开后上方会d出工具栏，点击创建符号，选中待导出部分，点击Create Symbol，命名后点击确定：
3、选中需要切片的图标，点击切片按钮，点击加号，选定需要导出哪几种规格的切片，这里选5套，0.5X，1X，1.5X，2X，3X标准的规格：
4、点击导出按钮，选择待导出文件：
5、点开保存的文件夹，即可看到生成的html文件：
在HTML5里，从Web网页上访问本地文件系统变的十分的简单，那就是使用File API。这个File规范说明里提供了一个API来表现Web应用里的文件对象，你可以通过编程来选择它们，访问它们的信息。这个File API包括：
一个FileList序列，代表着由本地系统里选中的单个的文件组成的数组。用来选择文件的用户接口可以通过<input type=”file”>调用实现。
一个Blob接口，它代表原始二进制数据，通过Blob对象你可以访问里面的字节数据。
一个File接口，它里面存有文件的只读属性信息，像文件名，文件类型，文件数据访问的地址。
一个FileReader接口，它提供了读取一个文件的方法，和一个获取文件读取结果的事件模型。
一个FileError接口和一个FileException对象，它们用来定义这个规范中的错误产生条件。
如何使用这个例子：在这个例子中，我给出了一个画板，你可以从本地文件系统里拖拽进去一个图片，或者你也可以用文件选择框来选择图片。例子中，请只选择图片文件，我并没有添加文件过滤和文件类型检查。请记住，没有一个浏览器完全实现了HTML5，这个例子需要在支持HTML5的浏览器上运行，比如Firefox3.5以上。
实现File API的主要方法非常的简单，就像下面：
function imagesSelected(myFiles) {
for (var i = 0, f f = myFiles[i] i++) {
var imageReader = new FileReader()
imageReader.onload = (function(aFile) {
return function(e) {
var span = document.createElement(‘span‘)
span.innerHTML = ['<img class="images" src="', e.target.result,'" title="', aFile.name, '"/>'].join(”)
document.getElementById(‘thumbs’).insertBefore(span, null)
}
})(f)
imageReader.readAsDataURL(f)
}
}
function dropIt(e) {
imagesSelected(e.dataTransfer.files)
e.stopPropagation()
e.preventDefault()
}
选择在<td>上放置ondrop事件：
<td align=”left” height=”105″ ondragenter=”return false” ondragover=”return false” ondrop=”dropIt(event)”>
<output id=”thumbs”></output>
</td>
1、创建Canvas画板HTML5内声明一个Canvas画板很简单，只需要这样在HTML页面内加入一个canvas标签即可，需要定义其大小和id
view sourceprint?
1.<canvas id="myCanvas" width="400" height="400">
2.对不起，你的浏览器不支持Canvas标签！
3.</canvas>
2、实现方案整理
要实现这样一个球在固定盒子内随机移动我们需要做到以下几点：
1）、画板大小固定；
2）、球大小固定且圆心位置随机；
3）、需要考虑球不出边界；
4）、通过setInterval(function(){},speed)方法实现时间间隔通过清空面板和重画模拟球的移动。
3、通过JavaScript *** 作画板
1）、初始化变量
view sourceprint?
1.//x和y为球的圆心坐标
2.//speed:表示球移动的速度 单位为毫秒
3.//radius:为球的半径
4.//width和height为盒子大小
5.var w, x,y, speed = 500, radius = 50, width = 400, height = 400
2）、页面初始化绘制画板且设定时间间隔
view sourceprint?
01.//初始化
02.function init() {
03.drawCanvas()
04.setInterval(moveWheel, speed)
05.}
06.
07.//画盒子
08.function drawCanvas() {
09.//创建Canvas对象
10.var c = document.getElementById("myCanvas")
11.var ctx = c.getContext("2d")
12.//在画布面板上面创建一个矩形
13.ctx.fillStyle = "#000000"//设置填充颜色值
14.ctx.fillRect(0, 0, width, height)
15.ctx.fill()
16.
17.w = ctx
18.}
3）、随机移动球的实现
view sourceprint?
01.//随机移动球
02.function moveWheel() {
03.clearCanvas()
04.drawCanvas()
05.
06.//获得随机坐标
07.x = getRandomNum()
08.y = getRandomNum()
09.
10.//在画布上渲染一个圆形
11.w.fillStyle = '#FFFFFF'
12.w.beginPath()
13.w.arc(x, y, radius, 0, Math.PI * 2, true)
14.w.closePath()
15.w.fill()
16.}
4）、获取随机坐标数据
view sourceprint?
1.//获取随机数
2.function getRandomNum() {
3.return Math.random() * (width - radius * 2) + radius
4.}
5）、清除画布
view sourceprint?
1.//清除画布
2.function clearCanvas() {
3.if (typeof w != "undefined") {
4.w.clearRect(0, 0, width, height)
5.}
6.}
完整示例代码如下所示：
view sourceprint?
01.<!doctype html>
02.<html>
03.<head>
04.<title>HTML5标签Canvas画布练习轮子滚动</title>
05.<meta charset="UTF-8" />
06.</head>
07.<body onload="init()">
08.<h1>Canvas 标签实现一个球限定在盒子内随机移动效果</h1>
09.<canvas id="myCanvas" width="400" height="400">
10.对不起，你的浏览器不支持Canvas标签！
11.</canvas>
12.<script type="text/javascript" language="javascript">
13.//x和y为球的圆心坐标
14.//speed:表示球移动的速度 单位为毫秒
15.//radius:为球的半径
16.//width和height为盒子大小
17.var w, x,y, speed = 500, radius = 50, width = 400, height = 400
18.
19.//初始化
20.function init() {
21.drawCanvas()
22.setInterval(moveWheel, speed)
23.}
24.
25.//画盒子
26.function drawCanvas() {
27.//创建Canvas对象
28.var c = document.getElementById("myCanvas")
29.var ctx = c.getContext("2d")
30.//在画布面板上面创建一个矩形
31.ctx.fillStyle = "#000000"//设置填充颜色值
32.ctx.fillRect(0, 0, width, height)
33.ctx.fill()
34.
35.w = ctx
36.}
37.
38.//随机移动球
39.function moveWheel() {
40.clearCanvas()
41.drawCanvas()
42.
43.//获得随机坐标
44.x = getRandomNum()
45.y = getRandomNum()
46.
47.//在画布上渲染一个圆形
48.w.fillStyle = '#FFFFFF'
49.w.beginPath()
50.w.arc(x, y, radius, 0, Math.PI * 2, true)
51.w.closePath()
52.w.fill()
53.}
54.
55.//清除画布
56.function clearCanvas() {
57.if (typeof w != "undefined") {
58.w.clearRect(0, 0, width, height)
59.}
60.}
61.
62.//获取随机数
63.function getRandomNum() {
64.return Math.random() * (width - radius * 2) + radius
65.}
66.</script>
67.</body>
68.</html>
过多的代码解释这里就不罗嗦了，核心代码段均有注释，实在有什么不明白的地方随时留言。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）