HTML5交互动画开发历次作业

最新推荐文章于 2024-02-15 09:15:57 发布

zb_tjw

最新推荐文章于 2024-02-15 09:15:57 发布

阅读量1.2k

点赞数

分类专栏：滨院

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_32239767/article/details/79682913

版权

滨院专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Please Call Me LeiFeng!!!

1.用canvas画个笑脸这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第二周作业</title>
</head>

<body align="center">
<canvas id="myCanvas" width="600" height="600" style="border:solid"></canvas>
<script type="text/javascript">
	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");
	context.beginPath();
	context.lineWidth = 8;
	context.strokeStyle = "#ff0000";
	context.lineCap = "round"
	context.moveTo(20,20);
	context.lineTo(580,20);
	context.stroke();
	
	context.beginPath();
	context.lineWidth = 8;
	context.strokeStyle = "#00ff00";
	context.moveTo(580,20);
	context.lineTo(580,580);
	context.lineCap = "butt"
	context.stroke();
	
	context.beginPath();
	context.lineWidth = 5;
	context.strokeStyle = "#0000ff";
	context.moveTo(580,580);
	context.lineTo(50,580);
	context.setLineDash([5,5]);
	context.stroke();
	
	context.beginPath();
	context.lineWidth = 5;
	context.strokeStyle = "#ffff00";
	context.moveTo(50,580);
	context.lineTo(50,50);
	context.setLineDash([]);
	context.stroke();
	
	context.beginPath();
	context.lineWidth = 5;
	context.strokeStyle = "#000000";
	context.moveTo(50,50);
	context.lineTo(550,50);
	context.stroke();
	
	context.beginPath();
	context.lineWidth = 3;
	context.strokeStyle = "#ff0000";
	context.moveTo(550,50);
	context.lineTo(550,550);
	context.stroke();
	
	context.beginPath();
	context.lineWidth = 3;
	context.strokeStyle = "#000000";
	context.moveTo(150,130);
	context.lineTo(280,130);
	context.stroke();
	
	context.beginPath();
	context.lineWidth = 3;
	context.moveTo(320,130);
	context.lineTo(450,130);
	context.stroke();
	
	context.beginPath();
	context.moveTo(150,150);
	context.lineTo(215,220);
	context.stroke();
	
	context.beginPath();
	context.moveTo(215,220);
	context.lineTo(280,150);
	context.stroke();
	
	context.beginPath();
	context.moveTo(320,150);
	context.lineTo(385,220);
	context.stroke();
	
	context.beginPath();
	context.moveTo(385,220);
	context.lineTo(450,150);
	context.stroke();
	
	context.beginPath();
	context.moveTo(300,180);
	context.lineTo(260,300);
	context.stroke();
	
	context.beginPath();
	context.moveTo(260,300);
	context.lineTo(330,280);
	context.stroke();
	
	context.beginPath();
	context.moveTo(200,360);
	context.lineTo(300,400);
	context.stroke();
	
	context.beginPath();
	context.moveTo(300,400);
	context.lineTo(400,360);
	context.stroke();
</script>
</body>
</html>

2.用canvas画太极图，对老师提供的做了翻转操作
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <title>作业太极图</title>
    <meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas"width="400" height="400" style="border:1px solid; background:#E1E1FF;">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath(); 
context.arc(200,200,80,1.5*Math.PI,Math.PI/2,false); 
context.fillStyle="white"; 
context.closePath(); 
context.fill();
 
context.beginPath(); 
context.arc(200,200,80,Math.PI/2,1.5*Math.PI,false); 
context.fillStyle="black";
 context.closePath();
context.fill();

context.beginPath(); 
context.arc(200,240,40,0,Math.PI*2,true); 
context.fillStyle="black"; 
context.closePath(); 
context.fill();

context.beginPath(); 
context.arc(200,160,40,0,Math.PI*2,true);
context.fillStyle="white"; 
context.closePath(); 
context.fill();

context.beginPath(); 
context.arc(200,160,5,0,Math.PI*2,true); 
context.fillStyle="black";
context.closePath(); 
context.fill(); 

context.beginPath(); 
context.arc(200,240,5,0,Math.PI*2,true);
context.fillStyle="white";
context.closePath(); 
context.fill(); 


</script>
</body>
</html>

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第三周太极图作业</title>
</head>

<body>
<canvas id="myCanvas"width="400" height="400" style="border:1px solid; background:#EEE9E9;">
    你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
  
	//白色上半圆的代码如下：
	context.beginPath(); 
	context.arc(200,200,80,0,Math.PI,true);
	context.fillStyle="white";
	context.strokeStyle="white";
	context.fill();
	
	//黑色下半圆的代码如下：
	context.beginPath(); 
	context.arc(200,200,80,0,Math.PI,false);
	context.fillStyle="#000000";
	context.strokeStyle="black";
	context.fill();
	
	//绘制黑色小圆 
	context.beginPath(); 
	context.arc(160,200,40,0,Math.PI*2,true); 
	context.fillStyle="black"; 
	context.closePath(); 
	context.fill();

 	//绘制白色小圆 
	context.beginPath(); 
	context.arc(240,200,40,0,Math.PI*2,true);
	context.fillStyle="white"; 
	context.strokeStyle="white";
	context.closePath(); 
	context.fill();
	context.stroke();
	
	//绘制白色小圆心 
	context.beginPath(); 
	context.arc(160,200,5,0,Math.PI*2,true); 
	context.fillStyle="white";
	context.closePath(); 
	context.fill(); 
	
	//绘制黑色小圆心 
	context.beginPath(); 
	context.arc(240,200,5,0,Math.PI*2,true);
	context.fillStyle="black";
	context.closePath(); 
	context.fill(); 
</script>
</body>
</html>

3.自己任意画个图
这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第三周作业第二题</title>
</head>

<body>
<h3>矩形加赛贝尔曲线</h3>
<canvas id="myCanvas"width="400" height="400" style="border:1px solid; background:#EEE9E9;">
    你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
	
	//外部矩形
	context.beginPath(); 
	context.rect(100, 100, 200, 200);
    context.lineWidth = 2;
	context.fillStyle="#E1E1FF";
	context.fill();
	context.stroke();
	
	//赛贝尔曲线
	context.beginPath();
    context.moveTo(100, 100);
    context.quadraticCurveTo(200, 100, 200, 200);
	context.fillStyle="#FFBBFF";
	context.fill();
	context.stroke();
	
	context.beginPath();
    context.moveTo(100, 100);
    context.quadraticCurveTo(100, 200, 200, 200);
	context.fill();
    context.stroke();
	
	context.beginPath();
    context.moveTo(200, 200);
    context.quadraticCurveTo(200, 100, 300, 100);
	context.fillStyle="#FFBBFF";
	context.fill();
	context.stroke();
	
	context.beginPath();
    context.moveTo(200, 200);
    context.quadraticCurveTo(300, 200, 300, 100);
	context.fill();
    context.stroke();
	
	context.beginPath();
    context.moveTo(200, 200);
    context.quadraticCurveTo(100, 200, 100, 300);
	context.fillStyle="#FFBBFF";
	context.fill();
	context.stroke();
	
	context.beginPath();
    context.moveTo(200, 200);
    context.quadraticCurveTo(200, 300, 100, 300);
	context.fill();
    context.stroke();
	
	context.beginPath();
    context.moveTo(200, 200);
    context.quadraticCurveTo(200, 300, 300, 300);
	context.fillStyle="#FFBBFF";
	context.fill();
	context.stroke();
	
	context.beginPath();
    context.moveTo(200, 200);
    context.quadraticCurveTo(300, 200, 300, 300);
	context.fill();
    context.stroke();
</script>
</body>
</html>

4.渐变和阴影效果的使用（在第二周作业基础上的）
这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第四周作业</title>
</head>

<body>
<h3>矩形加赛贝尔曲线</h3>
<canvas id="myCanvas"width="400" height="400" style="border:1px solid; background:#EEE9E9;">
    你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
</canvas>

<canvas id="myCanvas2"width="400" height="400" style="border:1px solid; background:#EEE9E9;">
    你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
</canvas>

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas2");
	var ctx = canvas.getContext("2d");  
	
	ctx.beginPath();
	var grd=ctx.createLinearGradient(0,0,400,400);
    grd.addColorStop(0,"black");
    grd.addColorStop(1,"white");
    ctx.fillStyle=grd;
    ctx.fillRect(0,0,400,400);
	ctx.stroke();
	
    ctx.lineWidth = 5;  
    ctx.strokeStyle = "#163B62";   
	ctx.beginPath(); 
    ctx.arc(110, 100, 40, 0, Math.PI * 2, false);  
	ctx.shadowBlur = 5;
	ctx.shadowColor = "rgba(0,0,0,0.8)";
	ctx.shadowOffsetX = 0;  
	ctx.shadowOffsetY = -15; 
    ctx.stroke();  
    ctx.strokeStyle = "#000000";  
    ctx.beginPath();  
    ctx.arc(200, 100, 40, 0, Math.PI * 2, false);  
    ctx.stroke();  
    ctx.strokeStyle = "#BF0628";  
    ctx.beginPath();  
    ctx.arc(290, 100, 40, 0, Math.PI * 2, false);  
    ctx.stroke();  
    ctx.strokeStyle = "#EBC41F";  
    ctx.beginPath();  
    ctx.arc(150, 140, 40, 0, Math.PI * 2, false);  
    ctx.stroke();  
    ctx.strokeStyle = "#198E4A";  
    ctx.beginPath();  
    ctx.arc(240, 140, 40, 0, Math.PI * 2, false);  
    ctx.stroke();
	
	ctx.shadowBlur = 1;
	ctx.shadowColor = "rgba(0,0,0,0.5)";
	ctx.shadowOffsetX = 0;  
	ctx.shadowOffsetY = 5; 
	ctx.font = "30px Stencil";
	ctx.fillStyle="black";
    ctx.fillText("From:", 10, 260);
	
	ctx.font = "30px 华文行楷";
	ctx.fillStyle="cyan";
    ctx.fillText("二班28号XXX", 100, 300);
	
	ctx.font = "30px Stencil";
	ctx.fillStyle="black";
    ctx.fillText("To:", 120, 350);
	
	ctx.font = "30px 方正姚体";
	ctx.fillStyle="#EE82EE";
    ctx.fillText("美丽的", 170, 350);
	
	ctx.font = "40px 方正姚体";
	ctx.fillStyle="#EE82EE";
    ctx.fillText("杨老师", 260, 350);
	
</script>

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
	
	//外部矩形
	context.beginPath(); 
	context.rect(100, 100, 200, 200);
    context.lineWidth = 2;
	context.fillStyle="#E1E1FF";
	context.fill();
	context.stroke();
	
	//赛贝尔曲线
	context.beginPath();
    context.moveTo(100, 100);
    context.quadraticCurveTo(200, 100, 200, 200);
	context.fillStyle="#FFBBFF";
	context.fill();
	context.stroke();
	
	context.beginPath();
    context.moveTo(100, 100);
    context.quadraticCurveTo(100, 200, 200, 200);
	context.fill();
    context.stroke();
	
	context.beginPath();
    context.moveTo(200, 200);
    context.quadraticCurveTo(200, 100, 300, 100);
	context.fillStyle="#FFBBFF";
	context.fill();
	context.stroke();
	
	context.beginPath();
    context.moveTo(200, 200);
    context.quadraticCurveTo(300, 200, 300, 100);
	context.fill();
    context.stroke();
	
	context.beginPath();
    context.moveTo(200, 200);
    context.quadraticCurveTo(100, 200, 100, 300);
	context.fillStyle="#FFBBFF";
	context.fill();
	context.stroke();
	
	context.beginPath();
    context.moveTo(200, 200);
    context.quadraticCurveTo(200, 300, 100, 300);
	context.fill();
    context.stroke();
	
	context.beginPath();
    context.moveTo(200, 200);
    context.quadraticCurveTo(200, 300, 300, 300);
	context.fillStyle="#FFBBFF";
	context.fill();
	context.stroke();
	
	context.beginPath();
    context.moveTo(200, 200);
    context.quadraticCurveTo(300, 200, 300, 300);
	context.fill();
    context.stroke();
</script>
</body>
</html>

5.修改后的小鱼游动和自己设计的动画（用到的图片统一放在下边）
小鱼游动：
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <title>分割动画</title>
    <meta charset="utf-8">
</head>
<body>
<canvas id="background" width="800" height="374" style="border:solid; position:absolute; z-index: 0">
</canvas>
<canvas id="myCanvas" width="800" height="374" style="border:solid; position:absolute; z-index: 1">
    你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
</canvas>
<script type="text/javascript">
  // 背景画布
    var backCanvas = document.getElementById("background");
    var backContext = backCanvas.getContext("2d");
    var background = new Image();
    background.src = "海底.png";
    background.onload = function () {
        backContext.drawImage(background, 0, 0);
    };

	//前景画布
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var image = new Image();
	var frm = 0;
    image.src = "鱼动画.png";
    image.onload = function () {
        var x = -200, y = 150;
        setInterval(function() {
            context.clearRect(0, 0, 800, 374);
            context.save();
            context.translate(x, y);
            context.drawImage(image, 0, frm * 148, 201, 148, 20, 20, 201, 148);
            context.restore();
			frm++;
            if (frm >= 4) frm = 0;
            x += 10;
            if (x >= 800) {
                x = -200;
            }
        }, 1000 / 10);
    };
</script>
</body>
</html>

自己设计的动画：（也可以原地走动）
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <title>分割动画</title>
    <meta charset="utf-8">
</head>
<body>
<canvas id="background" width="600" height="400"  style="border:solid; position:absolute; z-index: 0">
</canvas>
<canvas id="myCanvas" width="600" height="400" style="border:solid; position:absolute; z-index: 1">
    你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
</canvas>
<script type="text/javascript">
	var backCanvas = document.getElementById("background");
    var backContext = backCanvas.getContext("2d");
    var background = new Image();
    background.src = "back.jpg";
    background.onload = function () {
        backContext.drawImage(background, 0, 0, 650, 480, 0, 0, 600, 400);
    };
	
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var image = new Image();
    image.src = "aaa.png";
    /*image.onload = function () {//原地走动
        var frm = 0;
        setInterval(function() {
            context.clearRect(0, 0, 600, 400);  //擦除画布图像
            context.drawImage(image, frm * 100, 0, 100, 300, 240, 200, 100, 200);
			                  //图像， 源图坐标，分割长宽，目标坐标，显示长宽
            frm++;
            if (frm >= 4) frm = 0;
        }, 200);       //时间间隔，毫秒值
    };*/
	image.onload = function () {//走动过整个画布
        var x = 0, y = 0;//图片的起始位置
		var frm = 0;
        setInterval(function() {
            context.clearRect(0, 0, 600, 400);
            context.save();
            context.translate(x, y);
            context.drawImage(image, frm * 100, 0, 100, 300, 0, 200, 100, 200);
            context.restore();
			frm++;
            if (frm >= 4) frm = 0;
            x += 5;//可以适当的配合下边的时间间隔调整这里，效果会非常好
            if (x >= 600) {//超出画布后就重新开始
                x = 0;
            }
        }, 1000 / 6);
    };
</script>
</body>
</html>

今天突然发现一个问题上述代码frm >= 4；这句代码应该为frm >= 6；也就是说上边的动画并没有显示完整，只是显示了前4个人物，动图就不替换了，需要的自己随手修改
素材图片：
这里写图片描述

5.通过监听鼠标事件画矩形（模拟图层合并）

<!DOCTYPE html>
<html>
<head>
    <title>画板</title>
    <meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="800" height="400" style=" position:absolute; z-index: 0">
    你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var mouseDown = false;
    var mouseX = 0;
    var mouseY = 0;
    var preX = 0;
    var preY = 0;
	
    //canvas.addEventListener("mousedown", onMouseDown, false);
    //canvas.addEventListener("mousemove", onMouseMove, false);
    //canvas.addEventListener("mouseup", onMouseUp, false);
	var layer1=document.createElement('canvas');
	var layer1_canvas=layer1.getContext('2d');
	layer1.width=800;
	layer1.height=400;
	layer1.style.position = "absolute";
	layer1.style.zIndex   = 8;
	layer1.style.border   = "2px solid";
	document.body.appendChild(layer1);
	
	layer1.addEventListener("mousedown", onMouseDown, false);
    layer1.addEventListener("mousemove", onMouseMove, false);
    layer1.addEventListener("mouseup", onMouseUp, false);

    function onMouseDown(e) {
		layer1_canvas.clearRect(0, 0, 800, 400);
		layer1_canvas.save();
        mouseDown = true;
        preX = e.pageX - layer1.clientLeft;
        preY = e.pageY - layer1.clientTop;
    }

    function onMouseMove(e) {
        if (mouseDown) {
			console.log("dfgjkkl");
			layer1_canvas.clearRect(preX-1, preY-1, mouseX-preX+2, mouseY-preY+2);
			layer1_canvas.save();
            mouseX = e.pageX - layer1.clientLeft;
            mouseY = e.pageY - layer1.clientTop;
            layer1_canvas.lineWidth = 2;
            layer1_canvas.beginPath();
            layer1_canvas.rect(preX, preY, mouseX-preX, mouseY-preY);
			layer1_canvas.stroke();
        }
    }

    function onMouseUp(e) {
        mouseDown = false;
		context.save();
		context.globalCompositeOperation="destination-over";
		context.drawImage(layer1,0,0,800,400,0,0,800,400)
		context.restore();
    }
</script>
</body>
</html>

6.通过监听鼠标事件画矩形（在一张canvas上清除的情况）

<!DOCTYPE html>
<html>
<head>
    <title>画板</title>
    <meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="800" height="400" style="border:solid">
    你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var mouseDown = false;
    var mouseX = 0;
    var mouseY = 0;
    var preX = 0;
    var preY = 0;
	var x = 0;
	var y = 0;
    canvas.addEventListener("mousedown", onMouseDown, false);
    canvas.addEventListener("mousemove", onMouseMove, false);
    canvas.addEventListener("mouseup", onMouseUp, false);

    function onMouseDown(e) {
        mouseDown = true;
        preX = e.pageX - canvas.clientLeft;
        preY = e.pageY - canvas.clientTop;
    }

    function onMouseMove(e) {
        if (mouseDown) {
			context.clearRect(preX-1, preY-1, mouseX-preX+2, mouseY-preY+2);
			context.save();
            mouseX = e.pageX - canvas.clientLeft;
            mouseY = e.pageY - canvas.clientTop;
			x = mouseX;
			y = mouseY;
            context.lineWidth = 2;
            context.beginPath();
            context.rect(preX, preY, mouseX-preX, mouseY-preY);
			context.stroke();
        }
    }

    function onMouseUp(e) {
        mouseDown = false;
    }
</script>
</body>
</html>

7.修改后的画板（自动闭合）

<!DOCTYPE html>
<html>
<head>
    <title>画板</title>
    <meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="800" height="400" style="border:solid">
    你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var mouseDown = false;
    var mouseX = 0;
    var mouseY = 0;
    var preX = 0;
    var preY = 0;
	var prex1;
	var prey1;
    canvas.addEventListener("mousedown", onMouseDown, false);
    canvas.addEventListener("mousemove", onMouseMove, false);
    canvas.addEventListener("mouseup", onMouseUp, false);

    function onMouseDown(e) {
        mouseDown = true;
        preX = e.pageX - canvas.clientLeft;
        preY = e.pageY - canvas.clientTop;
		
		prex1 = preX;
		prey1 = preY;
    }

    function onMouseMove(e) {
        if (mouseDown) {
            mouseX = e.pageX - canvas.clientLeft;
            mouseY = e.pageY - canvas.clientTop;
            context.lineWidth = 2;
            context.beginPath();
            context.moveTo(preX, preY);
            context.lineTo(mouseX, mouseY);
            context.stroke();
            preX = mouseX;
            preY = mouseY;
        }
    }

    function onMouseUp(e) {
        mouseDown = false;
		context.lineWidth = 2;
        context.beginPath();
        context.moveTo(preX, preY);
        context.lineTo(prex1, prey1);
        context.stroke();
</script>
</body>
</html>

8.鱼摇尾巴游泳到鼠标指定位置：存在问题，后退的时候鱼是倒着游的，而且会是图片的右上角移动到鼠标位置，给人的直观感受不好，提供一种处理方式是移动的x，y坐标和初始的x，y坐标是知道的，所以可以求得方向角，然后将鱼所在的画布旋转相应的角度就好，这样鱼就是一直正着游动了

<!DOCTYPE html>
<html>
<head>
    <title>分割动画</title>
    <meta charset="utf-8">
</head>
<body>
<canvas id="background" width="800" height="374" style="border:solid; position:absolute; z-index: 0">
</canvas>
<canvas id="myCanvas" width="800" height="374" style="border:solid; position:absolute; z-index: 1">
    你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
</canvas>
<script type="text/javascript">
  // 背景画布
    var backCanvas = document.getElementById("background");
    var backContext = backCanvas.getContext("2d");
	var mouseDown = false;
    var mouseX = 0;
    var mouseY = 0;
	var int;
	var x = -200, y = 150;
    var background = new Image();
    background.src = "海底.png";
    background.onload = function () {
        backContext.drawImage(background, 0, 0);
    };
	
	function finshMove(positionX,positionY) {
        //var x = -200, y = 150;
        var frm = 0;
		int = setInterval(function() {
            context.clearRect(0, 0, 800, 374);   //擦除画布图像
            context.save();
			context.translate(x, y);
            			
			 context.drawImage(image, 0, frm * 148, 201, 148, 20, 20, 201, 148);
			                  //图像， 源图坐标，分割长宽，目标坐标，显示长宽
            frm++;
            if (frm >= 4) frm = 0;
			
            context.restore();
			if(positionX > x){
					if (x <= positionX-140) {
						x += 14;       //移动快慢
					}
					if (y > positionY-88) {
						y -= 6;       //移动快慢
					}else{
						y += 6;
					}
				}else if(positionX < x){
					if (x > positionX) {
						x -= 14;       //移动快慢
					}
					if (y > positionY) {
						y -= 6;       //移动快慢
					}else{
						y += 6;
					}
				}
            
        }, 150);
    };

	//前景画布
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var image = new Image();
    image.src = "鱼动画.png";
	
	
    canvas.addEventListener("mousedown", onMouseDown, false);
    canvas.addEventListener("mousemove", onMouseMove, false);
    canvas.addEventListener("mouseup", onMouseUp, false);

    function onMouseDown(e) {
		window.clearInterval(int)
        mouseDown = true;
        mouseX = e.pageX - canvas.clientLeft;
        mouseY = e.pageY - canvas.clientTop;
		image.onload = finshMove(mouseX,mouseY);
    }

    function onMouseUp(e) {
        mouseDown = false;
    }
	
			
</script>
</body>
</html>

9.一下两题作业都是修改老师提供的范例代码，都是实现键盘CapsLock键的功能，修改起来完全一样
（1）：

<!DOCTYPE html>
<html>
<head>
    <title>检测大小写字母</title>
    <meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="400" height="240" style="border:solid">
    你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var isShiftDown = false;
	var isCapsLock = false;

    document.addEventListener("keydown", function (e) {
        if (e.keyCode == 16) {
            isShiftDown = true;
        }
		
		if (e.keyCode == 20) {
			if(isCapsLock){
				isCapsLock = false;
				}else{
					isCapsLock = true;
					}
        }
		
        if (e.keyCode == 65) {
			if(isCapsLock){
				if (isShiftDown) {
					console.log("输入了小写字母a")
				} else {
					console.log("输入了大写字母A")
				}
			}else{
					if (isShiftDown) {
						console.log("输入了大写字母A")
					} else {
						console.log("输入了小写字母a")
					}
				}
            
        }
    }, false);

    document.addEventListener("keyup", function (e) {
        if (e.keyCode == 16) {
            isShiftDown = false;
        }
    }, false);
</script>
</body>
</html>

（2）：

<!DOCTYPE html>
<html>
<head>
    <title>记事本</title>
    <meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:solid">
    你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    document.addEventListener("keydown", onKeyDown, false);   //监测键盘响应
    document.addEventListener("keyup", onKeyUp, false);
    setInterval(update, 1000 / 60);   //间隔调用
    var isShiftDown = false;
	var isCapsLock = false;
    var text = [];
    var string = "";

    function onKeyDown(e) {
        var code = e.keyCode;
        if (code == 16) {
            isShiftDown = true;         //shift按下
        }
		
		if (code == 20) {
            if(isCapsLock){
				isCapsLock = false;
				}else{
					isCapsLock = true;
					}
        }
        if (code >= 65 && code <= 90) {
			if(isCapsLock){
				if (isShiftDown) {
					string += String.fromCharCode(code + 32);
				} else {
					string += String.fromCharCode(code);
				}
			}else{
					if (isShiftDown) {
						string += String.fromCharCode(code);
					} else {
						string += String.fromCharCode(code + 32);
					}
				}
        }
    }
    function onKeyUp(e) {
        if (e.keyCode == 16) {
            isShiftDown = false;
        }
    }

    var x = 10, y = 40;
    function update() {
        context.clearRect(0, 0, 400, 400);
        context.save();
        context.font = "40px Arial";
        context.fillText(string, x, y);   //绘制文本
        if (context.measureText(string).width >= 360) {     //测试长度
            text.push(string);  //将这行文本添加到数组text中，数组中每个元素代表一行文本
            string = "";     //清空
            y += 40;       //绘制位置下移40
        }
        for (var i = 0; i < text.length; i++) {
            context.fillText(text[i], x, (i + 1) * 40);   //绘制文本到画布
        }
        context.restore();
    }
</script>
</body>
</html>

zb_tjw

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5交互动画开发历次作业

Please Call Me LeiFeng!!!1.用canvas画个笑脸&amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Transitional//EN&amp;quot; &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&amp;quot;&amp;amp;gt;&amp
复制链接

扫一扫

专栏目录