使用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>

使用js實現圖畫人物動起來的方法

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <head> <meta

js 實現靜態圖片動起來

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>圖片移動顯示</title>&l

JS實現數組去重方法總結(極速PC蛋蛋六種方法)

組元 urn 合並 ++i push oop tarray 開始實現方法一：雙層循環，外層循環元素極速PC蛋蛋QQ2952777280【話仙源碼論壇】hxforum.com【木瓜源碼論壇】papayabbs.com，內層循環時比較值如果有相同的值則跳過，不相同則pu

[轉載] 用HTML5和CSS3完美實現網頁中動起來的箭頭

我們經常看到許多網站或者H5的動畫都做成了整屏切換的形式，為提高使用者體驗，會在首屏頁面下方放上一個動態的向下箭頭來提示使用者切換至下一屏。動態箭頭的效果圖如下：那麼這種效果是如何實現的呢？其實非常簡單，在CSS3中提供了animation屬性，專門用於動畫。要使用這個屬性，需要先了解@

js實現可拖動的佈局

思路：採用flex佈局，js即時修改固定列的寬度注意：父元素需設定position:relative；因offsetLeft和offsetTop是相對於具有定位的（position:absolute或者position：relative）父級元素的距離 html： <!DOCTYPE ht

JS-實現可拖動的div；實時監聽input標籤value變化

實現可拖動的div var mover = new Mover(document.getElementById("header")); // js封裝：實現可拖動的div. function Mover(title) { this.obj = title; this.st

五種js實現陣列去重的方法

第一種刪除後面重複元素 function removeRepeat1(arr){ var a1=((new Date).getTime()) for(

JS實現表格拖動

<html> <title>拖動列寬的表格</title> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312"> <style type=

用FLASH MX製作動畫卡通人物（4）-讓人物動起來

最後加入幀動畫以及ACTION：[img]/uploads/allimg/080331/1512500.gif[/img]動作設計是這樣的：眼睛按時間閃動，當滑鼠移上娃娃的手時，手上下移動，同時腦袋也歪一歪。眼睛很好做，增加一幀閉眼的動畫：[img]/uploads/alli

【翻譯】動手動腦玩轉Web遊戲之三：人物動起來、敵人出現、自定義視角

讓角色動起來當鍵盤上特定的按鍵被按下時，為了讓我們建立的角色同步地動起來，需要讓Gamma來為我們改變物件水平、垂直方向的位置狀態。在本章節，我們將實現如下功能： ·鍵盤上向左的方向鍵控制角色往左移動 ·鍵盤上向右的方向鍵控制角色往右

js實現父子類整合的方法

//屬性拷貝 function cpProperties(src,desc){ for(var key in src){ if(src.hasOwnProperty(key)){ desc[key] = src[key];

js實現文字拖動

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTM

js實現字串替換replaceAll的方法

JS 字串替換操作有replace() 方法。但是這個方法有些問題，就是隻能替換目標字串中第一個匹配的字串。如下例： var str = "wordwordwordword"; var strNew = str.replace("word","Excel"

JS實現陣列去重的方法

1.使用ES6的Set進行去重 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>陣列去重</title>

js實現緩動效果-讓div運動起來

rect() prop star this line ret rtti logs start var tween = { linear:function(t,b,c,d){ return c*t/d + b; }, eas

android 自定義view時，實現動起來的幾種方法

前言在自定義view時如何讓她動起來呢？本人在14年面世的時候就被問到了listview下拉重新整理時，如何下拉如何上移，還記得本人當初的答案是使用屬性動畫，被人好好的鄙視了一番，說多了，好了拔劍吧 offsetLeftAndRight(offsetX)

原生js實現拖動滑塊驗證

cnblogs tcc mvt wms 網站 hnu 按鈕 itl rip 拖動滑塊驗證是現在的網站隨處可見的，各式各樣的拖動法都有。下面實現的是某寶的拖動滑塊驗證： <!DOCTYPE html> <html lang="en"> <he

js實現window.open不被攔截的解決方法匯總

line bsp pan 測試 ava cli class 頁面點擊一、問題：今天在處理頁面ajax請求過程中，想實現請求後打開新頁面，就想到通過 js window.open 來實現，但是最終都被瀏覽器攔截了。二、分析：在谷歌搜索有沒有解決方法，有些說可以通過新

js實現快速排序的方法

大小我們 mage 左右 div () quicksort www for 因為面試面到了這個問題，所以寫一下，加深印象，有兩種方法第一種是通過兩個for循環，每一次對比相鄰兩個數據的大小，小的排在前面，如果前面的數據比後面的大就交換這兩個數的位置，這個方法就是比較次數

原生js實現outerWidth()方法，用到getComputedStyle

turn left func ltview wid nts dst fault 方法 function getTrueStyle(obj,attr){ if(obj.currentStyle){ //ie return obj.currentStyle[at

使用js實現圖畫人物動起來的方法

相關推薦