使用js實現圖畫人物動起來的方法
阿新 • • 發佈:2019-01-14
<%@ 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>