canvas小案例

最新推荐文章于 2025-07-02 19:05:13 发布

原创最新推荐文章于 2025-07-02 19:05:13 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

html 专栏收录该内容

2 篇文章

订阅专栏

碰壁反弹

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>反弹</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#cvs{
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -250px;
				margin-top: -250px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<canvas id="cvs" width="500" height="500"></canvas>
	</body>
	<script type="text/javascript">
		var csv = document.getElementById("cvs");
			ctx = cvs.getContext("2d");
			//获取随机位置
			var x = Math.floor(Math.random()*500);
			var y = Math.floor(Math.random()*500);	
			//判断是在左边还是右边
			var l=true;
				t=true;
			//如果在左边就加，向右运动；在右边就减，向左运动
			function hua(){	
				if(l){
					x++;
					if(x>=csv.width-80){
						l = false;
					}
				}else{
					x--;
					if(x<=0){
						l = true;
					}
				}
				if(t){
					y++;
					if(y>=csv.height-80){
						t = false;
					}
				}else{
					y--;
					if(y<=0){
						t = true;
					}
				}
				//根据随机位置画图
				ctx.beginPath();
				ctx.rect(x,y,80,80);
				ctx.fillStyle = "green";
				ctx.fill();	
				ctx.closePath();
			}
			setInterval(function(){
				//在绘画小方块之前要清一下屏，否则会不断重画
				ctx.clearRect(0,0,csv.width,csv.height)
				hua();
			},1)
	</script>
</html>

画布

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>画布</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#csv{
				border: 1px solid #000;
				margin: 10px 0 0 50px;
			}
		</style>
	</head>
	<body>
		<canvas id="csv" width="600" height="500"></canvas>
		<button id="btn1">画画</button>
		<button id="btn2">擦除</button>
		<button id="btn3">重画</button>
	</body>
	<script type="text/javascript">
		var csv = document.getElementById("csv");
			ctx = csv.getContext("2d");
		var btn1 = document.getElementById("btn1");
		var btn2 = document.getElementById("btn2");
		var btn3 = document.getElementById("btn3");
		//画画
		btn1.onclick=function(){
			csv.onmousedown=function(e){
				ctx.beginPath();
				ctx.moveTo(e.clientX-csv.offsetLeft,e.clientY-csv.offsetTop);
				
				document.onmousemove=function(e){
					ctx.lineTo(e.clientX-csv.offsetLeft,e.clientY-csv.offsetTop);
					ctx.strokeStyle = "red";
					ctx.lineWidth=5;
					ctx.stroke();
				}
				document.onmouseup=function(){
					document.onmousedown=null;
					document.onmousemove=null
				}
			}
		}
		//擦除
		btn2.onclick=function(){
			csv.onmousedown=function(e){
				document.onmousemove=function(e){
					ctx.clearRect(e.clientX-csv.offsetLeft,e.clientY-csv.offsetTop,10,10);	
				}
				document.onmouseup=function(){
					document.onmousedown=null;
					document.onmousemove=null
				}
			}	
		}
		//清屏
		btn3.onclick = function(){
			ctx.clearRect(0,0,csv.width,csv.height);
		}
	</script>
</html>

贝壳

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#cvs{
				/*border: 1px solid #000;*/
			}
		</style>
	</head>
	<body>
		<canvas id="cvs" width="500" height="400"></canvas>
	</body>
	<script type="text/javascript">
		var cvs = document.getElementById("cvs");
		
		var ctx = cvs.getContext("2d");
		
		ctx.beginPath();
		ctx.arc(100,200,100,0,2*Math.PI,true);
		ctx.closePath();
		ctx.strokeStyle="blue";
		ctx.stroke();
		
		ctx.beginPath();
		ctx.arc(50,200,50,0,2*Math.PI,true);
		ctx.closePath();
		ctx.strokeStyle="pink";
		ctx.stroke();
		
		ctx.beginPath();
		ctx.arc(60,200,60,0,2*Math.PI,true);
		ctx.closePath();
		ctx.strokeStyle="yellow";
		ctx.stroke();
		
		ctx.beginPath();
		ctx.arc(80,200,80,0,2*Math.PI,true);
		ctx.closePath();
		ctx.strokeStyle="red";
		ctx.stroke();
	</script>
</html>

刮刮乐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>刮刮乐</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#guaguajiang{
				width: 300px;
				height: 150px;
				text-align: center;
				line-height: 150px;
				font-size: 30px;
				margin-left: 100px;
				position: absolute;
			}
			#csv{
				margin-left: 99px;
				border: 1px solid red;	
				position: absolute;
				z-index: 9999;
			}
		</style>
	</head>
	<body>
			<canvas id="csv" width="300" height="150"></canvas>
			<div id="guaguajiang">一等奖</div>
	</body>
	<script type="text/javascript">
		var csv = document.getElementById("csv");
		 	ctx = csv.getContext("2d");
		var ggj = document.getElementById("guaguajiang");	 
		var arr=["一等奖","二等奖","海景别墅","一个亿","来克莱斯幻影","谢谢惠顾"];
		var i = Math.floor(Math.random()*arr.length);
		arr[i];
		ggj.innerHTML = arr[i];
		
		ctx.beginPath();
		ctx.rect(0,0,300,150);
		ctx.fillStyle = "#C0C0C0";
		ctx.fill();
		ctx.closePath();
		//刮奖
		csv.onmousedown=function(e){
			document.onmousemove=function(e){
				ctx.clearRect(e.clientX-csv.offsetLeft,e.clientY-csv.offsetTop,10,10);
			}
			document.onmouseup=function(){
				document.mousemove=null;
				document.mousedown=null;
			}
		}
	</script>
</html>

时钟

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>canvas时钟</title>
    </head>
<body>
        <canvas width="500" height="500" style="background:pink; margin:50px auto; display:block; " id="clock">
            您的浏览器当前版本不支持canvas表签
        </canvas>
        <script>
            var clock = document.getElementById("clock");
            var cxt = clock.getContext('2d');
            
            function drawClock(){
            cxt.clearRect(0,0,500,500); //清除画布
            //获取时间
            var now = new Date();   //定义时间
            var sec = now.getSeconds();  //获取秒
            var minute = now.getMinutes();  //获取分钟
            var hour = now.getHours();   //获取小时
            //小时必须获取浮点类型，产生偏移（小时+分钟比）
            hour = hour + minute/60;
            //将24小时转换为12小时
            hour=hour>12?hour-12:hour;
            
            //表盘（蓝色）
            cxt.beginPath();  //画笔开始
            cxt.lineWidth = 5;  //设置画笔的线宽
            cxt.strokeStyle="blue";  //设置画笔的颜色
            cxt.arc(250,250,200,0,360,false);  //绘制圆形，坐标250,250 半径200，整圆（0-360度），false表示顺时针
            cxt.stroke();   //绘图
            cxt.closePath();  //结束画布
            //刻度
                //时针刻度
                for(var i=0; i<12; i++){
                    cxt.save();
                    //设置时针的样式
                    cxt.lineWidth=7;
                    cxt.strokeStyle="#000";
                    //设置异次元空间原点
                    cxt.translate(250,250);
                    //设置旋转角度
                    cxt.rotate(i*30*Math.PI/180);
                    cxt.beginPath();
                    cxt.moveTo(0,-170); //画线， 从坐标0，-170开始
                    cxt.lineTo(0,-190); //到坐标0，-190结束
                    cxt.stroke();
                    cxt.closePath();
                    cxt.restore();
                }
                //分针刻度
                for(var i=0; i<60;i++){
                    cxt.save();
                    cxt.lineWidth=5;
                    cxt.strokeStyle="#000";
                    cxt.translate(250,250);
                    cxt.rotate(i*6*Math.PI/180);
                    cxt.beginPath();
                    cxt.moveTo(0,-180);
                    cxt.lineTo(0,-190);
                    cxt.stroke();
                    cxt.closePath();
                    cxt.restore();    
                }    
            //时针
            cxt.save();
            //时针样式
            cxt.lineWidth = 7;
            cxt.strokeStyle="#000";
            cxt.translate(250,250);
            cxt.rotate(hour*30*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-140);
            cxt.lineTo(0,10);
            cxt.stroke();
            cxt.closePath();
            
            cxt.restore();
            
            //分针
            cxt.save();
            //分针样式
            cxt.lineWidth = 5;
            cxt.strokeStyle="#000";
            cxt.translate(250,250);
            cxt.rotate(minute*6*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-160);
            cxt.lineTo(0,15);
            cxt.stroke();
            cxt.closePath();
            
            cxt.restore();
            
            //秒针
            cxt.save();
            cxt.lineWidth = 3;
            cxt.strokeStyle="#f00";
            cxt.translate(250,250);
            cxt.rotate(sec*6*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-185);
            cxt.lineTo(0,20);
            cxt.stroke();
            cxt.closePath(); 
            //画出时针，分针，秒针交叉点
            cxt.beginPath();
            cxt.strokeStyle="#f00";
            cxt.arc(0,0,5,0,360,false);
            cxt.fillStyle="#fff";   //填充颜色
            cxt.fill();   //填充
            cxt.stroke();
            cxt.closePath();  
            //秒针装饰
            cxt.beginPath();
            cxt.strokeStyle="#f00";
            cxt.arc(0,-160,5,0,360,false);
            cxt.fill();
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
        }
        //使用setinterval();让时钟动起来
        drawClock();
        setInterval(drawClock,1000);
        </script>
</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>时钟</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#csv{
				background: papayawhip;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				margin:auto;
			}
		</style>
	</head>
	<body>
		<canvas id="csv" width="500" height="500"></canvas>
	</body>
	<script type="text/javascript">
		var csv = document.getElementById("csv");
			ctx = csv.getContext("2d");	
		function clock(){
			ctx.clearRect(0,0,csv.width,csv.height);
			//获取时间
			var now = new Date();
			var hour = now.getHours();
			var minute = now.getMinutes();
			var second = now.getSeconds();
			
			hour = hour+minute/60;
			hour=hour>12?hour-12:hour;
			//时钟外框
			ctx.beginPath();
			ctx.lineWidth = 5;
			ctx.arc(250,250,200,0,2*Math.PI,true);
			ctx.strokeStyle = "orangered";
			ctx.stroke();
			ctx.closePath();
			//标注小时时间
			ctx.font = "bold 30px 幼圆";
			ctx.fillStyle = "#000";
			ctx.fillText("12",240,105)
			ctx.fillText("11",160,130)
			ctx.fillText("1",320,130)
			ctx.fillText("10",100,180)
			ctx.fillText("2",380,180)
			ctx.fillText("9",80,260)
			ctx.fillText("3",400,260)
			ctx.fillText("8",105,340)
			ctx.fillText("4",375,340)
			ctx.fillText("7",170,400)
			ctx.fillText("6",240,420)
			ctx.fillText("5",320,400)
			//小时刻度
			for(var i=0; i<12;i++){
				ctx.save();
				ctx.lineWidth=6;
				ctx.strokeStyle = "coral";
				ctx.translate(250,250);
				ctx.rotate(i*30*Math.PI/180);
				ctx.beginPath();
				ctx.moveTo(0,-200);
				ctx.lineTo(0,-180);
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
			}
			//分钟刻度
			for(var i=0;i<60;i++){
				if(i%5!=0){
					ctx.save();
					ctx.lineWidth = 5;
					ctx.strokeStyle = "crimson";
					ctx.translate(250,250);
					ctx.rotate(i*6*Math.PI/180);
					ctx.beginPath();
					ctx.moveTo(0,-200);
					ctx.lineTo(0,-190);
					ctx.stroke();
					ctx.closePath();
					ctx.restore();
				}
			}
			//时针
			ctx.save();
			ctx.lineWidth=7;
			ctx.strokeStyle = "#3C3C3C";
			ctx.translate(250,250);
			ctx.rotate(hour*30*Math.PI/180);
			ctx.beginPath();
			ctx.moveTo(0,-130);
			ctx.lineTo(0,10);
			ctx.stroke();
			ctx.closePath();
			ctx.restore();
			//分针
			ctx.save();
			ctx.lineWidth=5;
			ctx.strokeStyle = "#66512C";
			ctx.translate(250,250);
			ctx.rotate(minute*6*Math.PI/180);
			ctx.beginPath();
			ctx.moveTo(0,-140);
			ctx.lineTo(0,10);
			ctx.stroke();
			ctx.closePath();
			ctx.restore();
			//秒针
			ctx.save();
			ctx.lineWidth=3;
			ctx.strokeStyle = "orangered";
			ctx.translate(250,250);
			ctx.rotate(second*6*Math.PI/180);
			ctx.beginPath();
			ctx.moveTo(0,-170);
			ctx.lineTo(0,20);
			ctx.stroke();
			ctx.closePath();
			ctx.restore();
			//时钟中心
			ctx.beginPath();
			ctx.lineWidth = 3;
			ctx.strokeStyle="orangered";
			ctx.arc(250,250,5,0,2*Math.PI,false);
			ctx.fillStyle = "#fff";
			ctx.fill();
			ctx.stroke();
			ctx.closePath();
		}
		setInterval(function(){
			clock();
		},1000)		
	</script>
</html>

画心

<!DOCTYPE html>
<html>
<head>
    <title>Draw Heart</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
            margin: 0;
        }

        body {
            height: 100%;
            background-color: white;
        }
        #canvasZone {
            width: 100%;
            height: 100%;
            text-align: center;
        }
        #myCanvas {
            height: 100%;
            display: block;
            /*background-color:aqua;*/
        }
    </style>
    <script type="text/javascript">
        var arr = [];//保存所有的XY坐标，只为验证。实际程序中可删除。
        var r = 4;
        var radian;//弧度
        var i;
        var radianDecrement;//弧度增量
        var time = 10;//每个点之间的时间间隔
        var intervalId;
        var num = 360;//分割为 360 个点
        var startRadian = Math.PI;
        var ctx;
        window.onload = function () {
            startAnimation();
        }
        function startAnimation() {
            ctx = document.getElementById("myCanvas").getContext("2d");
            //让画布撑满整个屏幕，-20是滚动条的位置，需留出。如滚动条出现则会挤压画布。
            WINDOW_HEIGHT = document.documentElement.clientHeight - 20;
            WINDOW_WIDTH = document.documentElement.clientWidth - 20;
            ctx.width = WINDOW_WIDTH;
            ctx.heigh = WINDOW_HEIGHT;
            drawHeart();
        }
        function drawHeart() {
            ctx.strokeStyle = "red";
            ctx.lineWidth = 1;//设置线的宽度
            radian = startRadian;//弧度设为初始弧度
            radianDecrement = Math.PI / num * 2;
            ctx.moveTo(getX(radian), getY(radian));//移动到初始点
            i = 0;
            intervalId = setInterval("printHeart()", time);
        }
        //x = 16 sin^3 t, y = (13 cos t - 5 cos 2t - 2 cos 3t - cos 4t)
        function printHeart() {
            radian += radianDecrement;
            ctx.lineTo(getX(radian), getY(radian));//在旧点和新点之间连线
            //arr.push("X:" + getX(radian) + "<br/>Y:" + getY(radian) + "<br/>");
            i++;
            ctx.stroke();//画线
            if (i >= num) {
                clearInterval(intervalId);
                //document.getElementById("bs").innerHTML = arr.join("");//打印所有的XY坐标点。
            }
        }
        function getX(t) {//由弧度得到 X 坐标
            return 100 + r * (16 * Math.pow(Math.sin(t), 3));
        }
        function getY(t) {//由弧度得到 Y 坐标
            return 50 - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
        }
    </script>
</head>
<body>
<div id="canvasZone">
    <canvas id="myCanvas"></canvas>
</div>
<div id="bs">
</div>
</body>
</html>