canvas绘制小黄鸭

已于 2022-03-19 13:40:18 修改
阅读量695 收藏 1
点赞数 2
分类专栏： canvas 文章标签： canvas
于 2019-04-03 22:24:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42231248/article/details/89006444
版权

canvas初试动画——小黄鸭（也是我当初学习canvas的处女作）
效果图如下：
请添加图片描述

源代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{margin:0;padding:0;}
		body{}
		canvas{
			background: rgba(0,0,0,0);
			position: absolute;
			left:0;
			right:0;
			margin: auto;
		}
		.c2{
			background: rgba(0,0,0,0);
		}

	</style>
	<script type="text/javascript">
		window.onload = function(){
			var c1 = document.getElementsByClassName('c1')[0];
			var ctx = document.getElementsByClassName('c1')[0].getContext("2d");
			ctx.lineWidth = 6;
			ctx.strokeStyle = "#7e5f4a";
			
			ctx.beginPath();
			ctx.fillStyle = "#FFFF66";
			ctx.moveTo(60, 222);
			ctx.bezierCurveTo(-10, 400, 450, 430, 331, 179);
			ctx.fill();
			ctx.stroke();

			ctx.beginPath();
			ctx.fillStyle = "#FFFF66";
			ctx.moveTo(205, 212);
			ctx.bezierCurveTo(53, 55, 391, -39, 331, 189);
			ctx.fill();
			ctx.stroke();

			ctx.beginPath();
			ctx.fillStyle = "rgba(255,255,255)";
			ctx.moveTo(57, 222);
			ctx.bezierCurveTo(144, 242, 99, 219, 190, 198);
			ctx.fill();
			ctx.stroke();

			ctx.beginPath();
			ctx.fillStyle = "#FFFF66";
			ctx.moveTo(148, 304);
			ctx.bezierCurveTo(374, 330, 231, 130, 139, 282);
			ctx.fill();
			ctx.stroke();

			ctx.rotate(4/6*Math.PI);
			ctx.beginPath();
			ctx.fillStyle = "#7e5f4a";
			BezierEllipse2(ctx, -20, -275, 12, 15);
			ctx.fill();
			ctx.stroke();

			ctx.beginPath();
			ctx.strokeStyle = "#fff";
			ctx.fillStyle = "#fff";
			BezierEllipse2(ctx, -20, -270, 3 , 6);
			ctx.fill();
			ctx.stroke();

			ctx.beginPath();
			ctx.strokeStyle = "transparent";
			ctx.fillStyle = "#f46a4d";
			BezierEllipse2(ctx, -55, -360, 15 , 20);
			ctx.fill();
			ctx.stroke();

			ctx.beginPath();
			ctx.strokeStyle = "#7e5f4a";
			ctx.moveTo(-40, -365);
			ctx.bezierCurveTo(-45, -390, -80, -390, -70, -346);
			ctx.stroke();

			//画椭圆
			function BezierEllipse2(ctx, x, y, a, b)
			{
			   var k = .5522848,
			   ox = a * k, // 水平控制点偏移量
			   oy = b * k; // 垂直控制点偏移量

			   ctx.beginPath();
			   //从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
			   ctx.moveTo(x - a, y);
			   ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
			   ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
			   ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
			   ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
			   ctx.closePath();
			   ctx.stroke();
			};


			var c2 = document.getElementsByClassName('c2')[0];
			var ctx2 = document.getElementsByClassName('c2')[0].getContext("2d");
			var a = 390;
			var b = 210;
			var deraction = -1;
			var caiWidth = 2;

			setInterval(function(){
				ctx2.strokeStyle = "rgba(0,255,255,0.3)";
				var linearGradient= ctx2.createLinearGradient(0,0,0,500);
				linearGradient.addColorStop(0,"rgba(0,255,255,0.1)");
				linearGradient.addColorStop(0.5,"rgba(154,255,255,0.1)");
				linearGradient.addColorStop(1,"rgba(0,255,255,1)");
				ctx2.fillStyle = linearGradient;
				ctx2.lineWidth = 1;
				ctx2.beginPath();
				ctx2.clearRect(0,0,800,500); 
				var speed = rand(5,10);
				var speed2 = rand(5,10);
				ctx2.moveTo(0, 300);
					if(deraction == 1){
						a += speed;
						c1.style.top = c1.offsetTop + speed/10 + "px";
						b -= speed2;
					}
					if(deraction == -1){
						a -= speed;
						c1.style.top = c1.offsetTop - speed/9 + "px";
						b += speed2;
					}
					ctx2.bezierCurveTo(200 , a , 600 , b , 800 , 300);
					if(a >= 390){
						deraction = -1;
					}
					if(a <= 210){
						deraction = 1;
					}

				ctx2.lineTo(800,500);
				ctx2.lineTo(0,500);
				ctx2.fill();
				ctx2.stroke();
				ctx2.closePath();

				ctx2.beginPath();
				ctx2.moveTo(80, 430);
				ctx2.fillStyle = "rgba(154,255,255,0.5)";
				ctx2.bezierCurveTo(400 , a+speed/10+100 , 450 , b-speed2/10+100 , 770 , 420);
				ctx2.fill();
				ctx2.closePath();

				for(var num=0;num<5;num++){
					ctx2.beginPath();
					ctx2.moveTo(80+num*6, 330+num*6);
					ctx2.fillStyle = "rgba(179,255,255,"+ (1-0.1*num-0.5) +")";
					ctx2.bezierCurveTo(300 , a+speed/10+40 , 350 , b-speed2/10 , 370+num*6 , 320+num*6);
					ctx2.fill();
					ctx2.closePath();
				}


				//彩虹
				for(var cai=0;cai<3;cai++){
					ctx2.beginPath();
					if(ctx2.lineWidth == 4 && cai == 2){
						ctx2.strokeStyle = "rgba(0,255,0,0.6)";
						ctx2.moveTo(520, 40+(cai+3)*ctx2.lineWidth);
						ctx2.bezierCurveTo(700-+(cai+1)*ctx2.lineWidth , -50+(cai+1)*ctx2.lineWidth, 780-+(cai+1)*ctx2.lineWidth , 60+(cai+1)*ctx2.lineWidth , 790-(cai+1)*ctx2.lineWidth , 150+(cai+1)*ctx2.lineWidth);
						ctx2.stroke();
						ctx2.closePath();
					}

					ctx2.beginPath();
					if(caiWidth<= 4){
						ctx2.lineWidth = caiWidth;
					}else{
						ctx2.lineWidth = 4;
					}
					
					if(cai == 0){
						ctx2.strokeStyle = "rgba(255,0,0,0.6)";
					}
					if(cai == 1){
						ctx2.strokeStyle = "rgba(255,255,0,0.6)";
					}
					if(cai == 2){
						ctx2.strokeStyle = "rgba(0,0,255,0.4)";
					}
					ctx2.moveTo(520, 40+(cai+1.4)*ctx2.lineWidth);
					ctx2.bezierCurveTo(700-+cai*ctx2.lineWidth , -50+cai*ctx2.lineWidth, 780-+cai*ctx2.lineWidth , 60+cai*ctx2.lineWidth , 790-cai*ctx2.lineWidth , 150+cai*ctx2.lineWidth);
					ctx2.stroke();
					ctx2.closePath();

				}
				caiWidth += 0.1;

				//云朵
				ctx2.beginPath();
				ctx2.fillStyle = "#ff0";
				ctx2.moveTo(540, 20);
				ctx2.bezierCurveTo(580 , 0, 680 , 100 , 540 , 80);
				ctx2.fill();
				ctx2.closePath();

				ctx2.beginPath();
				ctx2.fillStyle = "#ff0";
				ctx2.moveTo(540, 20);
				ctx2.bezierCurveTo(380 , 20, 480 , 80 , 540 , 80);
				ctx2.fill();
				ctx2.closePath();

				ctx2.beginPath();
				ctx2.fillStyle = "#ff0";
				ctx2.moveTo(740, 120);
				ctx2.bezierCurveTo(580 , 100, 680 , 200 , 740 , 180);
				ctx2.fill();
				ctx2.closePath();

				ctx2.beginPath();
				ctx2.fillStyle = "#ff0";
				ctx2.moveTo(740, 120);
				ctx2.bezierCurveTo(780 , 100, 880 , 200 , 740 , 180);
				ctx2.fill();
				ctx2.closePath();
			},100);


			//随机n到m的一个整数
			function rand(n,m){
				var c = m - n + 1;
				return Math.floor(Math.random() * c + n);
			}
		}
		</script>
</head>
<body>
	<canvas width="800" height="500" class="c1"></canvas>
	<canvas width="800" height="500" class="c2"></canvas>
</body>
</html>
风舞红枫
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用canvas画出可爱的哆啦A梦
FleshyAPP的博客
05-11 989
用canvas画出可爱的哆啦A梦 提示：这里可以添加本文要记录的大概内容： 例如：本文就介绍了canvas案例的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、canvas是什么？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 二、使用步骤 1.哆啦A梦基本代码 代码如下（示例）： <!DOCTYPE html> <html l
全网最火 - 跳舞的鸭子动态源码 - 超简单
anzhehan1535的博客
12-16 342
全网最火 - 跳舞的鸭子动态源码 - 超简单 效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @...
用Canvas画一只会跟着鼠标走的小狗
weixin_34055787的博客
03-01 505
以前经常看到这种效果：在网页右下角放一个人，然后他的眼珠会跟着鼠标转，效果如下：这个例子来自于CodePen，它是根据鼠标的位置设置两个眼球的transform: rotate属性做的效果。这种跟着鼠标移动的小交互一般都比较好玩，所以我突然想到，能不能做一只会跟着鼠标走的小狗，最后的效果如下所示：我们一步步来实现这个效果。1. 小狗走的动画小狗走的动画应该怎么实现呢？如果用一张gif，然后根据鼠标...
虎虎生威年，用Compose Canvas画只猛虎让大家 “虎躯一震” 吧
乐翁龙
01-26 2711
开篇废话 无奈放假前又出了两个需求，忙活到昨天终于是上线了。 打开掘金发现大家都在创意闹新春，有放烟花的，有写福、写春联的，有年兽作战小游戏的，还有画虎的。该说不说，‘你们掘金花活儿挺多啊’！我也来参与了，真香~ 写这篇文章呢是看到了前端同学使用Echarts画的老虎（ 《辞旧迎新 2022 我用Echarts画了个大老虎，祝大家新春快乐，虎虎生威啊。》）。这老虎确实可以，我就同样直接拿来了，感谢iconfont作者Eve！ 实现目标 这篇文章我们就利用Compose的Canvas来一块一块的绘制出一只.
canvas绘制可爱猫咪
chenxi1025的博客
11-09 2120
有没有萌到你呢？
用canvas画一个简易的机器猫头像
Serena_tz的博客
09-21 845
用canvas画一个机器猫的头像，原图如下： 代码实现效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>作业2</title> <
微信小程序：实现canvas绘制地图及简单拖动
03-17
在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在界面上进行图形绘制，从而实现各种复杂的交互效果。本篇文章将聚焦于如何利用Canvas在微信小程序中绘制地图，并实现简单的拖动功能。以下是对这个主题的...
微信小程序canvas绘制坐标图
03-29
这里是微信小程序项目中用到的canvas绘制柱状图、线图、饼状图，跟html里的canvas略微差别，不做详细介绍，仅做个记录防失忆啊， 1、线图 function draw(data, ctx) { var width, height = 300, ratioX, ratioY, ...
微信小程序利用canvas 绘制幸运大转盘功能
08-27
在微信小程序中，我们同样可以使用canvas来绘制图形，但需要注意的是，微信小程序的canvas API与H5中的有些许不同，因此在编写代码时需要特别注意。 在描述中提到的代码示例中，首先在`onLoad`生命周期函数中获取了...
canvas绘制皮卡丘
10-31
纯坐标点计算绘制皮卡丘，心疼自己~~~~(>_<)~~~~
手绘水彩画野生动物封面
07-25
手绘水彩画野生动物封面适用于动物封面素材设计的AI格式素材
HTML5 canvas射击鸭子小游戏.zip
07-11
HTML5 canvas射击鸭子小游戏
html5 canvas 游戏
05-13
一款用html5编的兔子吃萝卜的小游戏。
微信小程序canvas画布绘制矩形、椭（圆）、直线、文字
最新发布
01-09
在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在界面上进行动态图形绘制，创造出丰富的视觉效果。本文将深入探讨如何使用Canvas API在微信小程序中绘制矩形、椭圆、直线以及添加文字。 首先，我们需要...
Canvas制作经典贪吃蛇
han_tiao_tiao的博客
06-19 704
Canvas制作贪吃蛇小游戏
Python实现小黄鸭字符动画
King
08-08 1749
动画本身是由静态的图片组成的，按照一定的顺序将静态的图片在极短的时间内播放就可以形成动画。因此，我们可以根据这个原理，将动态的图片转化成一张张静态的图片，再对这些静态图片加以处理，最后，将处理好的静态图片转化成动态图片。这样就达到对动态图片处理的目的。 具体步骤： 1、把动态图片转化成静态图片 2、对每一张静态图片进行处理 灰度化 静态图转化成一系列的字符 一系列字符做成字符画 3、把...
canvas 在其他画好的上面继续画_螃蟹怎么画？一步一步画出来简笔画螃蟹，可爱又简单！大家一起哦...
weixin_35870524的博客
12-19 329
螃蟹怎么画？简笔画的螃蟹还是比较简单的，而且也会更加可爱。小螃蟹虽然脾气比较暴躁，但是样子不丑。如果画出来的话，还是很好看的。有很多小朋友都喜欢螃蟹，因为螃蟹也比较典型。小螃蟹最显著的特点，就是横着走路。而且，大钳子也非常有力量。稍微不开心的话，就可能会伤到人。这么看来，小螃蟹并不是惹人爱的动物。但是，为什么小朋友们还是喜欢小螃蟹呢？是因为，小螃蟹长得可爱，而且卡通版的也很萌，就更招人喜欢啦。今天...
教你如何利用canvas画布绘制哆啦A梦
qq_39155611的博客
06-12 3337
教你如何利用canvas画布绘制哆啦A梦 最近一直在练习使用canvas画布标签，今天教大家如何使用canvas画布绘制哆啦A梦。如图： HTML代码： <canvas id="my_canvas"></canvas> CSS代码： canvas { display:block; margin:0 auto; background: pink } JavaScript代码：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风舞红枫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值