使用canvas 代码画小猪佩奇
使用canvas 代码画小猪佩奇
最近不是小猪佩奇很火嘛！！！ 前几天 在知乎 看见了别人大佬用python写的 小猪佩奇， 顿时想学 ，可是 自己 没学过python（自己就好爬爬图片,,,,几个月没用 又丢了）
然后 就想画一个 百度了一下 javascript 基本没用 只能自己写了 然后瞄准了canvas 画布
于是自己研究了一下 写出来了，（假如是大神的话 就知道 我写的不怎么好 代码用的太多了 感觉很多代码都没用 可是 删了又会出错， 不知道 怎么优化 这也是在学校时候无聊弄的！）
下面贴图贴代码！！！
<canvas id="myCanvas" width="400" height="500" style="border: 1px solid #808080; margin-left:400px;" onmousemove="cnvs_getCoordinates(event);" onmouseout="cnvs_clearCoordinates();">看不见我！！！</canvas><script>FunPig();//小猪佩奇function FunPig() {var ct = document.getElementById('myCanvas').getContext('2d');ct.beginPath() //开始ct.lineWidth = "3";ct.strokeStyle = "pink";//起点ct.moveTo(75, 15); //控制范围 结束//context.quadraticCurveTo(cpx, cpy, x, y);ct.quadraticCurveTo(220, 26, 220, 160); //第一步ct.moveTo(219, 141);ct.quadraticCurveTo(240, 300, 70, 250); //第三步// ct.stroke()ct.moveTo(76, 253);ct.quadraticCurveTo(16, 220, 74, 111);ct.moveTo(73, 112);ct.quadraticCurveTo(60, 112, 31, 83);ct.moveTo(31, 83);ct.quadraticCurveTo(23, 26, 75, 15);ct.moveTo(75, 15);ct.quadraticCurveTo(108, 32, 99, 61);ct.moveTo(99, 61);ct.quadraticCurveTo(66, 101, 31, 81);ct.stroke();// 鼻子的两个孔ct.beginPath();ct.arc(48, 48, 6, 0 * Math.PI, 2.5 * Math.PI);ct.stroke();ct.beginPath();ct.arc(77, 48, 6, 0 * Math.PI, 2.5 * Math.PI);ct.stroke();//耳朵//左耳朵ct.beginPath();ct.moveTo(149, 31);ct.quadraticCurveTo(155, 0, 189, 6);ct.moveTo(189, 6);ct.quadraticCurveTo(188, 30, 170, 44);//右耳朵ct.moveTo(188, 59);ct.quadraticCurveTo(198, 24, 222, 32);ct.moveTo(222, 32);ct.quadraticCurveTo(255, 54, 199, 75);ct.stroke();//嘴巴ct.beginPath();ct.arc(93, 178, 30, 0 * Math.PI, 2.5 * Math.PI);ct.stroke();//眼睛ct.beginPath();ct.strokeStyle = " #BDBDBD";ct.arc(141, 67, 14, 0 * Math.PI, 2.5 * Math.PI);ct.stroke();ct.beginPath();ct.strokeStyle = "#000000";ct.arc(136, 64, 6, 0 * Math.PI, 2.5 * Math.PI);ct.stroke();ct.beginPath();ct.strokeStyle = " #BDBDBD";ct.arc(170, 88, 14, 0 * Math.PI, 2.5 * Math.PI);ct.stroke();ct.beginPath();ct.strokeStyle = "#000000";ct.fillStyle = "#FF0000";ct.arc(165, 87, 6, 0 * Math.PI, 2.5 * Math.PI);ct.stroke();// 粉红嘴腮ct.beginPath();ct.strokeStyle = " #CD8C95";ct.arc(178, 147, 20, 0 * Math.PI, 2.5 * Math.PI);ct.stroke();//身体ct.beginPath();ct.strokeStyle = "red";ct.moveTo(195, 245);ct.quadraticCurveTo(215, 215, 244, 410);ct.moveTo(244, 410);ct.quadraticCurveTo(244, 410, 38, 410);ct.moveTo(38, 410);ct.quadraticCurveTo(11, 410, 76, 251);ct.stroke();//两只手ct.beginPath();ct.strokeStyle = "pink";ct.moveTo(58, 294);ct.quadraticCurveTo(50, 288, 12, 238);ct.moveTo(56, 300);ct.quadraticCurveTo(56, 300, 16, 260);ct.lineTo(3, 269);ct.lineTo(11, 250);ct.lineTo(3, 228);ct.lineTo(15, 241);ct.stroke();//右手ct.beginPath();ct.moveTo(223, 292);ct.quadraticCurveTo(266, 288, 287, 271);ct.moveTo(287, 271);ct.quadraticCurveTo(236, 233, 279, 245);ct.moveTo(279, 245);ct.quadraticCurveTo(255, 200, 295, 247);ct.moveTo(295, 247);ct.quadraticCurveTo(288, 200, 306, 226);ct.moveTo(306, 226);ct.quadraticCurveTo(311, 250, 308, 248);ct.moveTo(308, 248);ct.quadraticCurveTo(344, 200, 334, 245);ct.moveTo(334, 245);ct.quadraticCurveTo(311, 280, 300, 280);ct.moveTo(300, 280);ct.quadraticCurveTo(311, 280, 224, 303);ct.stroke();ct.beginPath();ct.moveTo(94, 409);ct.quadraticCurveTo(94, 409, 96, 451);ct.moveTo(96, 451);ct.quadraticCurveTo(53, 429, 56, 461);ct.moveTo(56, 461);ct.quadraticCurveTo(56, 461, 107, 464); ct.lineTo(106, 409);ct.moveTo(183, 411); ct.lineTo(182, 447); ct.quadraticCurveTo(124, 434, 136, 464); ct.lineTo(196, 463);ct.lineTo(195, 409);ct.stroke();ct.beginPath();ct.lineWidth = "7";ct.strokeStyle = "pink";ct.lineCap = "round";ct.moveTo(238,360);ct.quadraticCurveTo(266, 380, 267, 360);ct.quadraticCurveTo(254, 330, 250, 380);ct.quadraticCurveTo(254, 420, 290, 369);ct.stroke();}</script>因为不会 所以记录的东西特别多...
使用canvas 代码画小猪佩奇相关推荐
- c语言程序小猪佩奇,使用canvas 代码画小猪佩奇(示例代码)
看不见我!!! functionFunPig() {varct=document.getElementById('myCanvas').getContext('2d'); ct.beginPath() ...
- 用python画小猪佩奇的编码_如何用Python代码画小猪佩奇
Python语言的功能太强大了,可以制作出很多想想的作品来,不信吗?用Python代码还可以画出小猪佩奇,代码其实很简单的,下面,就将几个关键步骤代码分享出来. 怎么用Python代码画小猪佩奇? 首 ...
- Python代码画小猪佩奇--turtle绘图
Python代码小猪佩奇–turtle绘图 效果图 代码 import time import turtle as tt.pensize(4) # 设置画笔的大小 t.colormode(255) # ...
- python代码画小猪佩奇动画片全集_使用python画个小猪佩奇的示例代码
本文给大家较详细的介绍了使用python画个小猪佩奇的示例代码,感兴趣的朋友一起看看吧 基本原理 选好画板大小,设置好画笔颜色.粗细,定位好位置,依次画鼻子.头.耳朵.眼睛.腮.嘴.身体.手脚.尾巴, ...
- python代码画小猪佩奇_用 Python 画一个小猪佩奇和哆啦 A 梦
0 前言 最近发现了很有意思的东西,有人用 turtle 这个库画了一个小猪佩奇,跑去 GitHub 看了一下代码,发现写这个的人真的很有耐心,居然能写下来. 再找了找,发现有人还画了哆啦 A 梦, ...
- 用python画小猪佩奇的编码有注释_啥是佩奇?使用Python自动绘画小猪佩奇的代码实例...
最近社会猪可是火遍了大江南北,不蹭下热度可对不起它.见过手画的佩奇,见过用代码画的吗? 没有?那就来看我大显身手. 用python的turtle库来画小猪佩奇. 有人问:turtle难不难? 答曰:不 ...
- 用CSS画小猪佩奇，你就是下一个社会人！ js将“I am a coder”反转成 “coder a am I”，不许用split，join，subString，reverse；求解方法三...
用CSS画小猪佩奇,你就是下一个社会人! 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这 ...
- 代码实现小猪佩奇（最社会的代码）
一.Html的小猪佩奇画法 <!DOCTYPE html> <html> <head><title>用css画一个小猪佩奇</title>& ...
- 怎么用python画房子_怎么用python画小猪佩奇
最近社会猪可是火遍了大江南北,不蹭下热度可对不起它.见过手画的佩奇,见过用代码画的吗? 没有?那就来看我大显身手. 用python的turtle库来画小猪佩奇. 有人问:turtle难不难? 答曰:不 ...
最新文章
- tp5+workman
- 【ES6专栏】全面解析ECMAScript 6模块系统
- [转]【Android】9-patch图片以及例子说明
- 牛客 - 减成一(差分数组)
- 每次创建maven都要重新设置set，如何将本地maven设置为默认的maven
- Angular input控件的click事件表达式如何被转换成JavaScript函数
- mysql如何通过数据库修改root_MySQL数据库之MySQL——修改root密码的4种方法(以windows为例)...
- 十万开发者票选，顶级当红讲师来了！
- mysql数据库：mysql增删改、单表、多表及子查询
- php输出mysql查返回行_php-MySQL简单查询返回零行
- 线程的属性和 线程特定数据 Thread-specific Data
- java滥用接口_接口滥用问题
- SVPWM调制的simulink仿真
- 浏览器html中加入word,web网页中加载word
- 路由器 mac 和 bssid是一个吗
- Only variable references should be returned by reference
- 音频编码知识与技术参数，常用音频协议介绍
- Android开发：一个TextView中设置文字不同字体大小和颜色的2种高效方法
- word2016 卡顿_word2016经常发生卡顿现象
- 吴恩达：神经网络和深度学习(Neural Networks and Deep Learning)