<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
canvas{
margin: 50px;
border: solid;
box-shadow: 1px 1px 1px 1px gray;
}
</style>
</head>
<body>
<canvas width="900" height="500" id="canvas">
你的浏览器不支持canvas。
</canvas>
<script>
let canvas=document.getElementById('canvas');
let cont=canvas.getContext('2d');
let arr=[];
class Ball{
constructor(x,y,r){
this.x=x;
this.y=y;
this.r=r;
this.color=`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
this.draw();
this.reduceX=Math.random()*10-5;
this.reduceY=Math.random()*10-5;
arr.push(this);
}
draw(){
cont.beginPath();
cont.arc(this.x,this.y,this.r,0,Math.PI*2);
cont.fillStyle=this.color;
cont.fill();
}
update(){
this.x+=this.reduceX;
this.y+=this.reduceY;
if(this.r>1){
this.r=this.r-0.5;
}else{
canvas.width=canvas.width;
}
}
}
var go=setInterval(function(){
canvas.width=canvas.width;
for(let i=0;i<arr.length;i++){
arr[i].update();
arr[i].draw();
}
},20);
canvas.onmousemove=function(ev){
var e=ev||window.event;
new Ball(e.clientX-canvas.offsetLeft,e.clientY-canvas.offsetTop,20+Math.random()*15)
}
</script>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html5 canvas绘制可移动的小球入门示例</title> <style type="text/css"> canvas{ box-shadow:2px 1px 2px 1px gray; } </style> </head> <body > <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 --> <canvas id="myCanvas" width="400px" height="300px"> 您的浏览器不支持canvas标签。 </canvas> <input type="button" value="保存为图片" id="save"> <div ></div> <!--<script type="text/javascript">--> <!--//获取Canvas对象(画布)--> <!--var canvas = document.getElementById("myCanvas");--> <!--//表示圆球的类--> <!--function Ball(x, y ,radius, speed){--> <!--this.x =x=10; //圆球的x坐标,默认为10 或者this,x=x||10;--> <!--this.y =y=10; //圆球的y坐标,默认为10 或者this,y=y||10;--> <!--this.radius =radius=10; //圆球的半径,默认为10 或者this,radius=radius||10;--> <!--this.speed =speed=5; //圆球的移动速度,默认为5 或者this,speed=radius||10;--> <!--//向上移动--> <!--this.moveUp = function(){--> <!--this.y -= this.speed;--> <!--if(this.y < this.radius){--> <!--//防止超出上边界--> <!--this.y = this.radius;--> <!--}--> <!--};--> <!--//向右移动--> <!--this.moveRight = function(){--> <!--this.x += this.speed;--> <!--var maxX = canvas.width - this.radius;--> <!--if(this.x > maxX){--> <!--//防止超出右边界--> <!--this.x = maxX;--> <!--}--> <!--};--> <!--//向左移动--> <!--this.moveLeft = function(){--> <!--this.x -= this.speed;--> <!--if(this.x < this.radius){--> <!--//防止超出左边界--> <!--this.x = this.radius;--> <!--}--> <!--};--> <!--//向下移动--> <!--this.moveDown = function(){--> <!--this.y += this.speed;--> <!--var maxY = canvas.height - this.radius;--> <!--if(this.y > maxY){--> <!--//防止超出下边界--> <!--this.y = maxY;--> <!--}--> <!--};--> <!--}--> <!--//绘制小球--> <!--function drawBall(ball){--> <!--if(typeof ctx != "undefined"){--> <!--ctx.beginPath();--> <!--ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);--> <!--ctx.fill();--> <!--}--> <!--}--> <!--//清空canvas画布--> <!--function clearCanvas(){--> <!--if(typeof ctx != "undefined"){--> <!--ctx.clearRect(0, 0, 400, 300);--> <!--}--> <!--}--> <!--var ball = new Ball();--> <!--//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误--> <!--if(canvas.getContext){--> <!--//获取对应的CanvasRenderingContext2D对象(画笔);--> <!--var ctx = canvas.getContext("2d");--> <!--drawBall(ball);--> <!--}--> <!--//onkeydown事件的回调处理函数--> <!--//根据用户的按键来控制小球的移动--> <!--function moveBall(event){--> <!--switch(event.keyCode){--> <!--case 37: //左方向键--> <!--ball.moveLeft();--> <!--break;--> <!--case 38: //上方向键--> <!--ball.moveUp();--> <!--break;--> <!--case 39: //右方向键--> <!--ball.moveRight();--> <!--break;--> <!--case 40: //下方向键--> <!--ball.moveDown();--> <!--break;--> <!--default: //其他按键操作不响应--> <!--return;--> <!--}--> <!--clearCanvas(); //先清空画布;--> <!--drawBall(ball); //再绘制最新的小球;--> <!--}--> <!--</script>-->
轮播:
let ul=document.getElementsByClassName("go")[0].getElementsByTagName("ul")[0]; // let go1=document.getElementsByClassName("go1")[0]; let li=ul.getElementsByTagName("li"); let pre=document.getElementById("pre"); let next=document.getElementById("next"); let x=-300; next.onclick=function () { var m=0; var jian=setInterval(function () { x-=30; m++; ul.style.top=x+"px"; if(m==10){ clearInterval(jian); } if(x==-1800){ x=-300; ul.style.top=x+"px"; } },100) } pre.onclick=function () { var m=0; var jian=setInterval(function () { x+=30; m++; ul.style.top=x+"px"; if(m==10){ clearInterval(jian); } if(x==0){ x=-1500; ul.style.top=x+"px"; } },100) } 4:拖放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> </style> </head> <body> <span draggable=true>啊把你的v系啊飒飒的 </span> <img src="images1/size_440_240_ad5c8312bcee86b34a9caa5f3ea65b00.jpg" ondrag=fn(event)> <div style="background: yellow;height: 300px;width: 400px;border:1px solid red"></div> <script> function fn(ev,that) { let evs=window.event||ev; evs.dataTransfer.setData("text",that.src);//第一个为文本,第二个为要存的东西; // console.log(that.src); } let odiv=document.getElementsByTagName("div")[0]; odiv.ondragover=function (ev) { var event=window.event||ev; event.preventDefault();//阻止默认事件; } odiv.ondrop=function (ev) { let event=window.event||ev; // let aimg=document.getElementsByTagName("img")[0]; let img=document.createElement("img"); img.src=event.dataTransfer.getData("text"); odiv.appendChild(img); // aimg.style.display="none"; } </script> </body> </html>