<!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>