使用js实现图画人物动起来的方法
2014-08-13 17:29
375 查看
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>canvas元素示例</title> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script> <script type="text/javascript"> function draw(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext('2d'); context.fillStyle = "#EEEEFF"; //設置顏色 context.fillRect(0, 0, 400, 300); //畫正方形 context.fillStyle = "red"; //顏色 context.strokeStyle = "blue"; //邊框顏色 context.lineWidth = 1;//邊框線寬度 context.fillRect(50, 50, 100, 100); context.strokeRect(50, 50, 100, 100); var img = new Image(); img.src="<%=request.getContextPath()%>/img/game/askway/a.jpg"; context.drawImage(img,0,0); setInterval(move,100); } var j=1; function move() { $("#part3").css("background-position",-(118 * (j+1)+70*j)+"px -0px"); j++; if(j==6){ j=0; } } var i=50; function rehua(){ setInterval(redraw,30); } function redraw(){ //var context = $("#canvas").getContext("2d"); var context = document.getElementById("canvas").getContext("2d"); context.clearRect(0, 0, 400, 300); var img = new Image(); img.src="<%=request.getContextPath()%>/img/game/askway/a.jpg"; context.drawImage(img, i, i); i++; } </script> <style type="text/css"> #part1 { border: solid 1px blue; width: 90px; height: 68px; background-image: url(<%=request.getContextPath()%>/img/game/askway/a.jpg); background-repeat: no-repeat; display: none; } #part2 { border: solid 1px blue; width: 90px; height: 68px; background-image: url(<%=request.getContextPath()%>/img/game/askway/a.jpg); background-repeat: no-repeat; background-position: 50% 50%; display: none; } #part3 { border: solid 1px blue; width: 70px; /* 960 576 192 192*/ height: 100px; background-image: url(<%=request.getContextPath()%>/img/game/askway/b.png); background-repeat: no-repeat; background-attachment: fixed; background-position: -118px -0px; /* background-position:10% 5%; */ } </style> </head> <body> <input type="button" onclick="draw('canvas');" value="移动"> <input type="button" onclick="rehua();" value="持续移动"> <div id="part1"></div> <br> <div id="part2"></div> <br> <div id="part3"></div> <h1>canvas元素示例</h1> <canvas id="canvas" width="400" height="300" /> </body> </html>
相关文章推荐
- 实现DIV圆角的js代码和使用方法
- 使用MVC中的HtmlHelper对象的ActionLink方法,实现一个Javascript:void(0)效果,去调用一个JS方法
- Zero Clipboard js+swf实现的复制功能使用方法
- Zero Clipboard js+swf实现的复制功能使用方法
- 使用js实现页面跳转方法
- TextBox使用calendar.js实现日期显示方法!
- js使用原型实现继承与new一个新对象的方法
- 两种方法使用js读写cookie实现一个底部广告浮层效果
- js使用正则实现ReplaceAll全部替换的方法
- Zero Clipboard js+swf实现的复制功能使用方法
- Zero Clipboard js+swf实现的复制功能使用方法
- js队列方法使用push(xx)结合shift()实现或者使用pop()结合unshift()实现
- 两种方法使用js读写cookie实现一个底部广告浮层效果
- 使用dwr实现下拉框级联和js实现动态选择option的selected状态方法总结
- 使用 Cufon 渲染网页字体(转载自ibm developerwork,在网页里引入特殊字体的方法,通过js实现字体渲染)(1)
- js实现运动logo图片效果及运动元素对象sportBox使用方法
- js实现运动logo图片效果及运动元素对象sportBox使用方法
- js使用正则实现ReplaceAll全部替换的方法
- js使用正则实现ReplaceAll全部替换的方法
- 下面这个网站中有很多使用js实现了php函数的方法