Canvas绘制幽灵小可爱

痛定思痛。 2023-03-05 03:25 28阅读 0赞

# Canvas绘制幽灵小可爱 #

### HTML部分 ###

<canvas id="canvas" width="400" height="500" style="background-color: #000000;"></canvas>

### JS部分 ###

let canvas = document.getElementById('canvas');
    			let cxt = canvas.getContext('2d');
    			//设定当前整体幽灵对象的Y轴位置初始值
    			let obj = { 
    				y:0
    			}
    			//设置椭圆的x,y轴的长
    			let ellipse = { 		
    				x:50,
    				y:10,
    			}
    			let face = -1;		//根据face来判定来回移动
    			function render(){ 
    				//根据对象数据来判断是否来回移动
    				if(obj.y<-50)face=1;
    				if(obj.y>0)face = -1;
    				obj.y+= 0.8 * face;
    				ellipse.x += face * 0.2;
    				ellipse.y += face * 0.05;
    				cxt.save();
    				cxt.clearRect(0,0,canvas.width,canvas.height);
    				//动画平移
    				cxt.translate(0,obj.y);
    				//绘制外形
    				cxt.beginPath();
    				cxt.lineWidth = 3;
    				cxt.strokeStyle = '#666';
    				cxt.fillStyle = 'white';
    				cxt.moveTo(100,300);
    				cxt.lineTo(100,200);
    				cxt.arcTo(100,150,150,150,50);
    				cxt.arcTo(200,150,200,200,50);
    				cxt.lineTo(200,300);
    				cxt.lineTo(190,290);
    				cxt.lineTo(180,300);
    				cxt.lineTo(170,290);
    				cxt.lineTo(160,300);
    				cxt.lineTo(150,290);
    				cxt.lineTo(140,300);
    				cxt.lineTo(130,290);
    				cxt.lineTo(120,300);
    				cxt.lineTo(110,290);
    				cxt.closePath();
    				cxt.stroke();
    				cxt.fill();
    				//绘制脸上
    				cxt.beginPath();
    				cxt.lineWidth = 5;
    				cxt.lineCap = 'round';
    				cxt.fillStyle = '#666';
    				cxt.arc(125,200,5,0,Math.PI*2);
    				cxt.arc(175,200,5,0,Math.PI*2);
    				cxt.closePath();
    				cxt.fill();
    				cxt.beginPath();
    				cxt.moveTo(130,220);
    				cxt.lineTo(170,220);
    				cxt.stroke();
    				cxt.closePath();
    				cxt.beginPath();
    				cxt.fillStyle = 'lightcoral';
    				cxt.lineWidth = 1;
    				cxt.lineCap = 'square';
    				cxt.moveTo(135,220);
    				cxt.lineTo(135,230);
    				cxt.arcTo(135,235,140,235,5);
    				cxt.arcTo(145,235,145,230,5);
    				cxt.lineTo(145,220);
    				cxt.stroke();
    				cxt.fill();
    				cxt.closePath();
    				cxt.beginPath();
    				cxt.lineCap = 'round';
    				cxt.lineWidth = 2;
    				cxt.moveTo(140,220);
    				cxt.lineTo(140,226);
    				cxt.stroke();
    				cxt.restore();
    				//绘制阴影
    				cxt.beginPath();
    				cxt.fillStyle = '#ddd';
    				cxt.ellipse(150,320,ellipse.x,ellipse.y,0,0,Math.PI*2);
    				cxt.stroke();
    				cxt.fill();
    				cxt.closePath();
    				requestAnimationFrame(render);	//为了使其动起来，用动画渲染。
    			}
    			render();

总结一点：利用beginPath()和closePath()是个好习惯能够很好的做到一个图形的绘制。还有save()和restore()，进行保存和复原之前状态。

## 最后展示如下： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyNTMyNDkz_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyNTMyNDkz_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/cbd10adb48ad499b8d7319e512a79f0d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序 canvas 绘制圆角矩形

/** * 绘制圆角矩形 * @param {Object} ctx - canvas组件的绘图上下文 * @param {Numbe...

Love The Way You Lie/ 2024年04月17日 05:28/ 0 赞/ 104 阅读

相关 sai绘制可爱海豚和上色教程

效果图： ![format_png][] 制作步骤： 1.创建钢笔图层，命名为“线稿”，使用曲线把鲸鱼的线稿大致绘制出来，这些线条最好是封闭的，方便上色，可结合ct

Love The Way You Lie/ 2023年07月20日 10:35/ 0 赞/ 17 阅读

相关 Canvas绘制幽灵小可爱

Canvas绘制幽灵小可爱 HTML部分 <canvas id="canvas" width="400" height="500" style="backg

痛定思痛。/ 2023年03月05日 03:25/ 0 赞/ 29 阅读

相关 canvas绘制七彩随机小球！

canvas绘制七彩随机小球 1、题目 > 拿到一个案例，需要在画布上实现不同大小颜色位置的七彩小球，并且要运动起来！ 2、思路 > （1）、第一步需要在页

柔光的暖阳◎/ 2022年10月15日 04:00/ 0 赞/ 216 阅读

相关 html canvas 绘制倒影,canvas

JavaScript let t = 0; const colors = \["\161616", "\cf894c", "\c74962"\]; const canva

系统管理员/ 2022年10月10日 06:24/ 0 赞/ 278 阅读

相关可爱的小蚂蚁

可爱的小蚂蚁我吃过饭，作在家里写作业，正在写字的时候老感觉有什么东西在脖子里乱动。有些不舒服，我叫来妈妈，妈妈帮我把那个小东西拿了出来，我定睛一看，竟然是一只小蚂蚁。

﹏ヽ暗。殇╰゛Y/ 2022年09月12日 11:42/ 0 赞/ 164 阅读

相关 canvas 绘制虚线

一.分析原理是：求出AB点之间的长度，再设置虚线的长度dashLength，把AB是我长度/虚线长度dashLength 就是虚线数量，根据虚线数量，长度就可以得到当第i个

阳光穿透心脏的1/2处/ 2021年09月12日 01:36/ 0 赞/ 651 阅读

相关绘制canvas彩色泡泡小球碰撞

globalCompositeOperation带来的不一样的烟花 ![20170224163016894][] 一.知识点 1.动画： setInterval(

墨蓝/ 2021年09月11日 07:54/ 0 赞/ 455 阅读

相关 canvas绘制矩形

canvas提供了三个API，分别是： 1.绘制一个填充的矩形 fillRect(x, y, width, height) 2.绘制一个矩形的边框

旧城等待，/ 2021年07月24日 21:51/ 0 赞/ 505 阅读

相关 canvas 图片绘制、视频绘制

canvas 1.canvas中绘制图片: img对象.onload=function(){ bi.drawImage

た入场券/ 2021年07月24日 11:36/ 0 赞/ 570 阅读