canvas小案例

最新推荐文章于 2025-07-02 19:05:13 发布
最新推荐文章于 2025-07-02 19:05:13 发布
阅读量1.4k 收藏 4
点赞数 1
CC 4.0 BY-SA版权
分类专栏： html 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/keep789/article/details/82496287

碰壁反弹

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

 

关于canvas的一些小案例
兜兜的博客
07-16 687
本篇内容主要为canvas的一些小案例制作及代码书写，案例包括：钟表的制作案例，跟随鼠标移动的彩带案例
简单的canvas实用小case1
SunsetGirl的博客
06-13 205
canvas绘制简单图形
canvas绘图 制作的小案例
01-19
canvas绘图 制作的小案例 canvas绘图 制作的小案例 canvas绘图 制作的小案例 canvas绘图 制作的小案例
前端可视化——Canvas实战篇
最新发布
1加1等于的博客
07-02 1171
本文是对应之前文章快速入门Canvas的进阶，主要实现了多个Canvas案例，比如创建画布、绘制矩形、圆形、文字、渐变以及清除画布等等实战案例。
canvas小案例（小动画）
清风无虑skr的博客
01-12 490
canvas小案例 案例简介 刚开始学canvas动画，简单的线条绘图已经掌握，想学下动画，所以写这个来练练手，写的不是太好，用到的精灵图是在网上找的QQ企鹅，通过裁剪精灵图且依次显示达到动画的效果。 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
Canvas初级小案例
cloki的博客
11-30 1597
canvas 画直线 画虚线 画矩形 画坐标系 随机生成柱状图 画圆 小案例 —— 绘制五环 小案例 —— 画一个字母 “S” 小案例 —— 画八卦镇 小案例 —— 圆形进度条 小案例 —— 饼状图 小案例 —— 小球弹一弹 小案例 —— 小球弹一弹封装 画文字 画一个闹钟
HTML5 之 Canvas （案例）
快乐小芍籽
02-20 2281
**星星闪动动画** 1、如何轮播一张图片上的序列帧 2、canvas的几个主要绘图API：drawImage()、save()、restore()。 3、如何处理鼠标事件 笔记： Window API： 循环调用三种方法： requestAnimFrame(fcuntion(){}); //根据电脑性能确定每次回调的时间（循环时间），更科学，提高效率 setTimeout(fu
基于html5开发的canvas图表案例.zip
02-13
"基于html5开发的canvas图表案例.zip"是一个压缩包，包含了使用HTML5 Canvas技术进行图表绘制的示例代码，让我们深入探讨一下这个主题。 Canvas是一个基于矢量图形的画布，开发者可以通过JavaScript API在画布上...
html2canvas生成图片案例
02-11
在本案例中，我们将深入探讨如何使用html2canvas来实现这样的功能。 首先，我们需要了解html2canvas的工作原理。它通过读取DOM结构，然后在浏览器的内存中构建一个对应的Canvas元素。这个过程中，html2canvas会处理...
前端canvas案例，下落小球碰撞物体运动轨迹，简单3D弹球基础逻辑
06-15
内容概要：下落小球碰撞物体运动轨迹，简单3D弹球基础逻辑。 实现技术：htm+js实现。双击浏览器打开即可看效果 能学到什么：canvas技术 适用人群： 前端canvas学习新手 阅读建议：支持canvas的浏览器
canvas案例
04-13
这个“canvas案例”是关于如何利用JavaScript API在`<canvas>`上进行基本图形绘制的示例。下面我们将深入探讨`<canvas>`元素以及如何通过它来创建各种图形。 首先，`<canvas>`标签本身是一个矩形区域，它的大小可以...
canvas的简单实例集合
马优晨
11-02 4257
这里讲解一些canvas的实例demo，大家可以参考着看看，希望对你有一定的帮助。 这里的demo主要是：canvas 绘制路径 、绘制矩形、绘制文本 、绘制圆形和扇形 、 设置渐变色 、设置渐变色 、图像处理方法、动画HTML代码<canvas id="myCanvas" width="400" height="200"> 您的浏览器不支持canvas！ </canva
超多经典canvas实例
08-11
超多经典canvas实例
canvas-示例
08-29
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
canvas小实例.rar
06-01
使用canvas绘制和裁切图片，使用filter这个CSS3属姓给图片加模糊效果
canvas画图小例子
笨笨的码农的博客
06-30 1256
<!DOCTYPE html> <html lang="en"> <head> <title>画图</title> <meta charset="utf-8"> </head> <body> <div id="con" style="width:500px;height:450px;border:...
canvas小案例微信小程序
weixin_43831302的博客
11-29 314
js Page({ data: { // width: 0, // height: 0 }, onLoad: function (options) { var that = this //获取系统信息 wx.getSystemInfo({ //获取系统信息成功，将系统窗口的宽高赋给页面的宽高 success: function (res) { that.width = res.windowW...
canvas 案例——时钟
yemuxia_sinian的博客
08-01 905
首先先理解几个方法： 1、save()和restore()：这对法宝非常有用，两个配对使用，saved方法用于临时保存画布的坐标系统的状态；restore方法用来恢复save之后保存的状态。可以简单的理解为，save之后的一系列的操作，比如translate和rotate等，在restore后，都会被释放恢复到原来的坐标状态。 eg： ctx.strokeStyle = '...
canvas基础讲解加示例
肥学的博客
06-19 824
之前其实有介绍过，只是没有给示例我们再来说说他。它内部封装的函数： 样例介绍1 样例2 样例3 点击直接资料领取 如果你在学习python或者Java哪怕是C遇到问题都可以来给我留言，因为在学习初期新手总会走很多弯路，这个时候如果没有有个人来帮一把的话很容易就放弃了。身边很多这样的例子许多人学着学着就转了专业换了方向，不仅是自身问题还是没有正确的学习。所以作为一个过来人我希望有问题给我留言，说不上是帮助就是顺手敲几行字的事情。这里有python，Java学习资料还有有有趣好玩的编程项目，更有难寻的各种
canvas经典案例
01-21
### Canvas 经典示例项目教程 #### 使用 Motion Canvas 创建动画效果 Motion Canvas 是一个用于创建复杂矢量动画的强大工具。其官方提供的示例项目展示了多种场景下的应用方式，包括但不限于数据可视化、教育视频...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值