canvas 绘制路飞

最新推荐文章于 2022-03-10 10:09:22 发布
最新推荐文章于 2022-03-10 10:09:22 发布
阅读量754 收藏 1
点赞数 1
分类专栏： canvas 文章标签： canvas
仅作为自己学习的记录。本文为博主原创文章，可以转载，请标明出处。
本文链接：https://blog.csdn.net/Feel__/article/details/78341120
版权

在这里插入图片描述

<canvas id="luffy" width="370" height="340"></canvas>
<p class="erhuo">二货</p>

<style>
	.erhuo {
		font-size: 36px;
		position: absolute;
		top: 220px;
		left: 300px
	}
</style>

<script type="text/javascript">
      window.onload = function(){
      	var ly = document.getElementById("luffy").getContext("2d");
      	// 草帽
      	ly.beginPath();
      	ly.lineWidth = 1;
      	ly.fillStyle = "#f9db61";
      	ly.strokeStyle = "#755c3e";
      	ly.lineTo(150, 60);
      	ly.bezierCurveTo(160, 0, 290, 0, 300, 50);
      	ly.fill();
      	ly.stroke();

      	ly.beginPath();
      	ly.lineWidth = 1;
      	ly.strokeStyle = "#94411c";
      	ly.fillStyle = "#ae3d32";
      	ly.lineTo(160, 48);
      	ly.bezierCurveTo(180, 25, 260, 25, 295, 48);
      	ly.fill();
      	ly.stroke();

      	ly.beginPath();
      	ly.lineWidth = 1;
      	ly.strokeStyle = "#755c3e";
      	ly.fillStyle = "#f9db61";
      	ly.moveTo(90, 130);
      	ly.bezierCurveTo(70, 0, 380, 10, 365, 130);
		ly.bezierCurveTo(360, 290, 80, 260, 90, 130);
		ly.moveTo(131, 120);
		ly.lineTo(141, 120);
		ly.moveTo(125, 125);
		ly.lineTo(135, 125);
		ly.moveTo(123, 130);
		ly.lineTo(133, 130);
		ly.moveTo(125, 190);
		ly.lineTo(135, 183);
		ly.moveTo(128, 180);
		ly.lineTo(121, 185);
		ly.moveTo(125, 175);
		ly.lineTo(120, 178);
		ly.moveTo(152, 220);
		ly.lineTo(157, 214);
		ly.moveTo(148, 218);
		ly.lineTo(151, 214);
		ly.moveTo(144, 214);
		ly.lineTo(148, 210);

		ly.moveTo(300, 220);
		ly.lineTo(310, 220);
		ly.moveTo(310, 215);
		ly.lineTo(320, 215);
		ly.moveTo(315, 210);
		ly.lineTo(325, 210);
      	ly.fill();
      	ly.stroke();

      	// 身体
      	ly.beginPath();
      	ly.fillStyle = "#fee5c7";
      	ly.strokeStyle = "#755c3e";
      	ly.moveTo(230, 245);
      	ly.lineTo(230, 266);
      	ly.lineTo(213, 285);
      	ly.lineTo(205, 310);
      	ly.lineTo(270, 310);
      	ly.lineTo(265, 285);
      	ly.lineTo(250, 266);
      	ly.lineTo(250, 245);
      	ly.fill();
      	ly.stroke();

      	// 衣服
      	ly.beginPath();
      	ly.strokeStyle = "#6b3941";
      	ly.fillStyle = "#be3642";
      	ly.moveTo(230, 267);
      	ly.lineTo(218, 280);
      	ly.lineTo(210, 310);
      	ly.lineTo(265, 310);
      	ly.lineTo(262, 283);
      	ly.lineTo(250, 267);
      	ly.lineTo(240, 298);
      	ly.lineTo(230, 267);
      	ly.fill();
      	ly.stroke();

      	// 脸轮廓
      	ly.beginPath();
      	ly.lineWidth = 1;
      	ly.fillStyle = "#fee5c7";
      	ly.strokeStyle = "#755c3e";
      	ly.moveTo(150, 160);
		ly.bezierCurveTo(110, 40, 350, 10, 315, 160);
		ly.bezierCurveTo(310, 280, 170, 275, 150, 160);
      	ly.fill();
      	ly.stroke();

      	// 头发
      	ly.beginPath();
      	ly.fillStyle = "#040404";
      	ly.strokeStyle = "#040404";
      	ly.lineWidth = 1;
      	ly.moveTo(150, 110);
      	ly.lineTo(130, 160);
      	ly.lineTo(165, 86);
      	ly.moveTo(145, 130);
      	ly.lineTo(135, 180);
      	ly.lineTo(157, 105);
      	ly.moveTo(160, 92);
      	ly.lineTo(150, 150);
      	ly.lineTo(170, 82);
      	ly.moveTo(145, 130);
      	ly.lineTo(150, 186);
      	ly.lineTo(158, 100);
      	ly.fill();
      	ly.moveTo(145, 190);
      	ly.quadraticCurveTo(120, 120, 173, 80);
      	ly.fill();
      	ly.moveTo(150, 190);
      	ly.quadraticCurveTo(158, 90, 173, 80);
      	ly.quadraticCurveTo(200, 70, 180, 90);
      	ly.fill();
      	ly.moveTo(180, 78);
      	ly.quadraticCurveTo(195, 63, 210, 62);
      	ly.fill();
      	ly.moveTo(235, 60);
      	ly.quadraticCurveTo(305, 55, 315, 120);
      	ly.fill();
      	ly.moveTo(155, 120);
      	ly.quadraticCurveTo(155, 150, 170, 170);
      	ly.quadraticCurveTo(160, 135, 175, 79);
      	ly.moveTo(171, 80);
      	ly.quadraticCurveTo(168, 120, 175, 135);
      	ly.quadraticCurveTo(175, 90, 210, 62);
      	ly.moveTo(208, 64);
      	ly.quadraticCurveTo(220, 105, 230, 100);
      	ly.quadraticCurveTo(223, 105, 215, 60);
      	ly.moveTo(233, 59);
      	ly.quadraticCurveTo(270, 80, 270, 120);
      	ly.quadraticCurveTo(250, 75, 213, 61);
      	ly.moveTo(250, 70);
      	ly.quadraticCurveTo(270, 110, 290, 115);
      	ly.quadraticCurveTo(275, 112, 260, 70);
      	ly.moveTo(270, 70);
      	ly.quadraticCurveTo(315, 140, 305, 160);
      	ly.quadraticCurveTo(320, 140, 300, 100);
      	ly.moveTo(300, 110);
      	ly.quadraticCurveTo(320, 140, 315, 180);
      	ly.quadraticCurveTo(325, 145, 310, 95);
      	ly.moveTo(310, 110);
      	ly.quadraticCurveTo(330, 150, 325, 160);
      	ly.quadraticCurveTo(340, 150, 305, 90);
      	ly.moveTo(300, 80);
      	ly.quadraticCurveTo(300, 120, 340, 120);
      	ly.quadraticCurveTo(310, 110, 300, 81);
      	ly.fill();
      	ly.stroke();

      	// 眉毛
      	ly.beginPath();
      	ly.strokeStyle = "#755c3e";
      	ly.moveTo(178, 120);
      	ly.lineTo(215, 130);
      	ly.moveTo(218, 130);
      	ly.lineTo(225, 127);
      	ly.moveTo(237, 125);
      	ly.lineTo(243, 130);
      	ly.moveTo(243, 132);
      	ly.quadraticCurveTo(238, 145, 245, 155);
      	ly.moveTo(245, 156);
      	ly.lineTo(241, 165);
      	ly.moveTo(246, 125);
      	ly.lineTo(252, 130);
      	ly.lineTo(290, 120);
      	ly.stroke();

      	// 左眼
      	ly.beginPath();
      	ly.fillStyle = "#fefefe";
      	ly.strokeStyle = "#fefefe";
      	ly.arc(198, 145, 18, 0, 2*Math.PI);
      	ly.fill();
      	ly.stroke();

      	ly.beginPath();
      	ly.fillStyle = "#040404";
      	ly.arc(198, 145, 5, 0, 2*Math.PI);
      	ly.fill();
      	ly.stroke();

      	ly.beginPath();
      	ly.strokeStyle = "#755c3e";
      	ly.lineWidth = 1;
      	ly.moveTo(179, 140);
      	ly.bezierCurveTo(185, 120, 210, 120, 217, 140);
      	ly.moveTo(180, 148);
      	ly.bezierCurveTo(188, 170, 210, 165, 216, 148);
      	ly.stroke();

      	// 右眼
      	ly.beginPath();
      	ly.fillStyle = "#fefefe";
      	ly.strokeStyle = "#fefefe";
      	ly.arc(275, 143, 18, 0, 2*Math.PI);
      	ly.fill();
      	ly.stroke();

      	ly.beginPath();
      	ly.fillStyle = "#040404";
      	ly.arc(275, 143, 5, 0, 2*Math.PI);
      	ly.fill();
      	ly.stroke();

      	
      	ly.beginPath();
      	ly.strokeStyle = "#755c3e";
      	ly.lineWidth = 1;
      	ly.moveTo(258, 140);
      	ly.bezierCurveTo(263, 120, 288, 120, 292, 140);
      	ly.moveTo(258, 148);
      	ly.bezierCurveTo(268, 170, 288, 160, 292, 148);

      	// 疤
      	ly.moveTo(262, 162);
      	ly.quadraticCurveTo(280, 173, 295, 158);
      	ly.moveTo(285, 162);
      	ly.lineTo(283, 170);
      	ly.moveTo(290, 159);
      	ly.lineTo(291, 166);
      	ly.stroke();

      	// 嘴巴
      	ly.beginPath();
      	ly.fillStyle = "#fffffe";
      	ly.strokeStyle = "#755c3e";
      	ly.moveTo(185, 180);
      	ly.lineTo(300, 180);
      	ly.moveTo(185, 180);
      	ly.bezierCurveTo(180, 250, 310, 250, 300, 180);
      	ly.moveTo(190, 205);
      	ly.lineTo(298, 205);
      	ly.moveTo(205, 180);
      	ly.lineTo(205, 222);
      	ly.moveTo(228, 180);
      	ly.lineTo(228, 230);
      	ly.moveTo(253, 180);
      	ly.lineTo(253, 232);
      	ly.moveTo(279, 180);
      	ly.lineTo(277, 225);
      	ly.fill();
      	ly.stroke();

      	// 耳朵 左
      	ly.beginPath();
      	ly.fillStyle = "#fee5c7";
      	ly.strokeStyle = "#755c3e";
      	ly.moveTo(150, 170);
      	ly.bezierCurveTo(128, 153, 142, 200, 161, 195);
      	ly.fill();
      	ly.moveTo(143, 178);
      	ly.quadraticCurveTo(145, 168, 156, 185);
      	ly.moveTo(148, 175);
      	ly.quadraticCurveTo(148, 190, 158, 190);
      	ly.fill();
      	ly.stroke();

      	// 耳朵 右
      	ly.beginPath();
      	ly.fillStyle = "#fee5c7";
      	ly.strokeStyle = "#755c3e";
      	ly.moveTo(315, 175);
      	ly.bezierCurveTo(340, 150, 330, 200, 308, 200);
      	ly.fill();
      	ly.moveTo(312, 183);
      	ly.quadraticCurveTo(330, 168, 322, 185);
      	ly.moveTo(308, 196);
      	ly.quadraticCurveTo(325, 186, 318, 180);
      	ly.fill();
      	ly.stroke();

      	// 手指
      	ly.beginPath();
      	ly.fillStyle = "#fee5c7";
      	ly.strokeStyle = "#755c3e";
      	ly.moveTo(175, 280);
      	ly.bezierCurveTo(190, 320, 220, 310, 235, 300);
      	ly.quadraticCurveTo(255, 285, 250, 270);
      	ly.quadraticCurveTo(245, 253, 240, 257);
      	ly.bezierCurveTo(233, 210, 250, 185, 230, 175);
      	ly.bezierCurveTo(210, 172, 230, 265, 210, 250);
      	ly.bezierCurveTo(185, 210, 190, 188, 180, 188);
      	ly.bezierCurveTo(160, 180, 170, 210, 192, 258);
      	ly.fill();
      	ly.moveTo(215, 276);
      	ly.bezierCurveTo(208, 265, 242, 250, 245, 260);
      	ly.bezierCurveTo(260, 275, 214, 295, 215, 275);
      	ly.moveTo(220, 270);
      	ly.quadraticCurveTo(220, 283, 230, 275);
      	ly.quadraticCurveTo(232, 263, 220, 270);
      	ly.moveTo(175, 280);
      	ly.bezierCurveTo(170, 255, 230, 282, 195, 290);
      	ly.quadraticCurveTo(185, 285, 185, 282);
      	ly.moveTo(180, 270);
      	ly.bezierCurveTo(180, 240, 240, 270, 205, 278);
      	ly.fill();
      	ly.stroke();
      	
      };
</script>
加加加菲猫
关注
专栏目录
用python画路飞代码_路飞骷髅制作
weixin_42515842的博客
12-31 2771
[python]代码库import turtle as tt.pu()t.goto(0,200)t.circle(-130,-80)t.pd()t.colormode(255)t.pensize(5)t.color(242,232,184)t.begin_fill()t.pencolor(0,0,0)t.circle(-130,160)t.seth(180)t.fd(255)t.end_fill(...
用python画路飞代码_用一行 Python 代码搞定炫酷可视化
weixin_34439450的博客
01-02 1093
作者：xiaoyu，半路转行数据，首发自Python数据科学前言学过Python数据分析的朋友都知道，在可视化的工具中，有很多优秀的三方库，比如matplotlib，seaborn，plotly，Boken，pyecharts等等。这些可视化库都有自己的特点，在实际应用中也广为大家使用。plotly、Boken等都是交互式的可视化工具，结合Jupyter notebook可以非常灵活方便...
python绘制路飞_路飞学城-Python开发集训-第一章
weixin_29662775的博客
02-21 266
一、学习体会学习本章的最大体会是终于搞明白，高级语言中编译型与解释型的区别和含义，因为之前看过一些视频，对基础知识还是比较熟悉，所以学起来不费什么力，不过金角大王说越往下内容越多，一定要加油学完8章。二、知识点总结1，数据类型int整型(long长整型python2)float浮点(默认精度17位)string字符串(单双引号，三引号多行)bool布尔(True,False大写首字母)type()...
用python绘制图案_如何用Python 绘制路飞图案
weixin_39788572的博客
11-27 335
最后出来的效果具体的代码看图片，运行结果看标题。t.goto(x,y) //将画笔放到坐标点(x,y)t.seth() //转画笔角度t.begin_fill() //开始填充t.end_fill() //结束填充t.color(x,y,z) //画笔颜色RGB（填充）t.pencolor(x,y,z) //...
用Python画路飞骷髅图案【附代码】
热门推荐
Luckyep的专栏
03-30 1万+
用Python代码实现这幅图的绘制，由于学艺不精，只能用直角坐标系作为参考画出来。 配色的RGB取色色块 还有重要的量角器兄弟 下面是代码 #路飞骷髅 import turtle as t #黄底帽子 t.pu() t.goto(0,200) t.circle(-130,-80) t.pd() t.colormode(255) t.pensize(5) t.co...
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达
一个超会写Bug的程序猿的博客
02-16 3114
源码： #路飞骷髅 import turtle as t #黄底帽子 t.pu() t.goto(0,200) t.circle(-130,-80) t.pd() t.colormode(255) t.pensize(5) t.color(242,232,184) #帽子黄底RGB t.begin_fill() t.pencolor(0,0,0) t.circle(-130,160) t.seth(180) t.fd(255) t.end_fill() #红色线条 t.begin_fill() t.co
微信小程序组件：canvas股票分时图
06-01
在微信小程序开发中，利用canvas绘制股票分时图是一种常见的需求，特别是在金融商贸类应用中。canvas是HTML5提供的一种绘图技术，它允许开发者在网页上动态绘制图形，而在微信小程序中，也有对应的API可以使用canvas...
Canvas上批量创建可视对象（DrawingVisual）管理，获取鼠标悬浮图形状态，并控制鼠标右键快捷菜单等...
03-19
在本文中，我们将深入探讨如何在WPF应用中利用Canvas和DrawingVisual批量创建可视对象，以及如何实现鼠标悬浮时获取图形状态和控制鼠标右键快捷菜单。这些技术对于开发高效且用户友好的图形界面至关重要。 首先，让...
pycharm画路飞
最新发布
03-21
关于"画路飞"这个问题，我理解为在PyCharm中绘制路飞的图像。 在PyCharm中，你可以使用Python的图形库来实现绘图功能。常用的图形库有matplotlib和turtle。下面是使用turtle库在PyCharm中绘制路飞的示例代码： ```...
解释下以下代码的运行逻辑 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自由网 -FD</title> </head> <body> <video id="video" src=""></video> <canvas id="canvas"></canvas> </body> <script> //媒体对象 var video = document.getElementById('video') var canvas = document.getElementById('canvas') canvas.width = 400; canvas.height = 300; const mediaStreamConstraints = { video: true, audio: false, video: { width: 400, height: 300, facingMode: "environment" } }; function gotLocalMediaStream(mediaStream) { video.srcObject = mediaStream//创建并实力化 video.play(); onetu(); onetu(); onetu(); } // Create WebSocket connection. const socket = new WebSocket('ws://127.0.0.1:4000'); // Connection opened socket.addEventListener('open', function (event) { }); // Listen for messages socket.addEventListener('message', function (event) { console.log('Message from server ', event.data); }); navigator.mediaDevices.getUserMedia(mediaStreamConstraints).then(gotLocalMediaStream).catch(); var context = canvas.getContext("2d"); //c创建对象 setInterval(function () { //setTimeout(function(){// var co = context.drawImage(video, 0, 0);//剪切图像 //console.log(co) img = context.getImageData(0, 0, 400, 300)//获取图片信息 data = img.data//获取图片信息 context.putImageData(img, 0, 0) im = canvas.toDataURL("image/jpe") //console.log(im) //im2=base64ToBlob(im,"image/jpe") //console.log(Date())//打印时间 if (socket.readyState == 1) { socket.send(im); } }, 43) //赋值粘贴即可用不懂的地方自己慢慢百度。注意ip地址填对，或者填本地。 </script> </html>
07-12
回调函数中通过`context.drawImage`方法将视频中的图像绘制到画布上，并通过`context.getImageData`方法获取绘制图像的像素数据。然后将像素数据放回画布中，并通过`canvas.toDataURL`方法将画布中的图像转为Base64...
Python路飞绘图数据
03-10
Python路飞绘图数据
小猪佩奇.py，利用Python中turtle模块，运行代码自动画出小猪佩奇图案
05-14
利用Python中turtle模块，运行代码自动画出小猪佩奇图案
80行代码！用Python做一个哆来A梦分身
cainiao_python的博客
05-26 955
对于分身术，大家想必都或多或少的从《火影忍者》的动漫上看到过，炫酷的影分身场面，每每看到都觉得非常过瘾。今天，小编其实是蓝胖子的铁粉，满满的童年回忆啊！今天Python来实现一个简单的哆...
ubuntu18.04安装python包_Ubuntu18.04下安装Python虚拟环境
weixin_39924481的博客
12-09 222
最近跟新的Ubuntu18.04版本里面自带了最新的Python3.6.5版本,在安装Python虚拟环境时需注意:1.首先是安装两个包pip3 install virtualenv # python虚拟环境pip3 install virtualenvwrapper # 封装了虚拟环境,支持一些简化命令然后通过pip3 list 查看是否安装成功2.添加环境变量(注意点!!!)vim ~/.ba...
用python画路飞代码_用Python画路飞骷髅图案【附代码】
weixin_39642619的博客
02-12 1520
用Python代码实现这幅图的绘制，由于学艺不精，只能用直角坐标系作为参考画出来。 配色的RGB取色色块 还有重要的量角器兄弟下面是代码#路飞骷髅import turtle as t#黄底帽子t.pu()t.goto(0,200)t.circle(-130,-80)t.pd()t.colormode(255)t.pensize(5)t.color(242,232,184) #帽子黄底RGBt...
用python画路飞代码_用python画个月亮_用python画月亮的代码 - CSDN
weixin_39738774的博客
01-13 922
这幅画的画是用Python代码来实现。由于糟糕的学习技能,只能用直角坐标系作为参考。颜色匹配的RGB颜色块和重要的量角器兄弟。下面是代码#路飞枪骨进口海龟当t #黄色帽子()(0200)(-130、-80)()(255)(5)(242232184)#黄色帽子bottomRGB_fill () (0, 0, 0) (-130160) (180) (255) _fill() #红色line_fill(...
每日一练：Python代码绘制航海王草帽路飞，打饭阿姨也能跟着学会的Turtle海龟绘图系列
小蓝枣的博客
03-10 7243
Turtle 海龟绘图系列 - Python 代码绘制航海王草帽路飞 第一章：程序运行 ① 效果展示 - 轮廓描绘 ② 效果展示 - 颜色填充 第二章：实现过程 ① 绘图数据下载 ② 海龟绘图配置项 ③ 轮廓绘制 ④ 颜色填充：衣服、裤子 ⑤ 颜色填充：草帽、腰带 ⑥ 完整源码
python 计算订单_python 全栈开发，Day105(路飞其他数据库表结构,立即结算需求)
weixin_39808803的博客
11-24 188
考试第三部分：Django16. 列列举你熟悉的Http协议头以及作用。（1分）Accept-Charset: 用于告诉浏览器，客户机采用的编码Host: 客户机通过这个头告诉服务器，想访问的主机名User-Agent: 客户机通过这个头告诉服务器，客户机的软件环境Cookie: 客户机通过这个头可以向服务器带数据View Code17. 状态码含义：200、301、302、304、404、5...
用python画路飞代码_路飞学城Python-Day38(第四模块思维导图)
weixin_39786617的博客
12-08 408
Servlet学习三——传输文件最先在考虑传输文件时,想通过java写一个文件上传案例,传给Servlet,Servlet再保存至数据库中,但苦于一直没找到实例,听说Flex有实际的例子,就直接用Flex例子来测试了.本文的顺序为: ...增大VM下linux的根目录空间增大VM下linux的根目录空间 用的太久,发现VM下的系统空间不足.简单的方法是,分一个新硬盘,挂载到根目录下. 下...
HTML5 Canvas绘制椭圆的4种方法详解
在HTML5 Canvas中，绘制椭圆是一项常见的图形操作，由于Canvas API本身并未直接提供绘制椭圆的内置函数，开发者通常需要采用不同的方法来实现。本文将深入介绍四种常用的绘制椭圆的方法：参数方程法、均匀压缩法、三...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值