Canvas名侦探柯南-canvas练习
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//脸
ctx.beginPath();
ctx.moveTo(205,410);
ctx.lineTo(307,550);
ctx.lineTo(334,574);
ctx.lineTo(485,640);
ctx.lineTo(530,620);
ctx.lineTo(645,530);
ctx.lineTo(670,500);
ctx.lineTo(730,300);
ctx.strokeStyle="#262829";
ctx.lineWidth=3;
ctx.stroke();
//眼镜
//右边镜框
ctx.beginPath();
ctx.moveTo(735,415);
ctx.lineTo(735,315);
ctx.lineTo(525,330);
ctx.lineTo(525,430);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(735,355);
ctx.lineTo(725,325);
ctx.lineTo(535,340);
ctx.lineTo(525,390);
ctx.stroke();
ctx.beginPath();
ctx.arc(630,415,105,0,Math.PI);
ctx.stroke();
//连接
ctx.beginPath();
ctx.moveTo(525,398);
ctx.lineTo(450,400);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(525,383);
ctx.lineTo(450,387);
ctx.stroke();
//左边镜框
ctx.beginPath();
ctx.moveTo(450,415);
ctx.lineTo(450,335);
ctx.lineTo(205,340);
ctx.lineTo(205,440);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(448,415);
ctx.lineTo(430,350);
ctx.lineTo(215,350);
ctx.lineTo(205,375);
ctx.stroke();
ctx.beginPath();
ctx.arc(327,405,123,0,Math.PI);
ctx.stroke();
//左边眉毛
ctx.beginPath();
ctx.moveTo(435,385);
ctx.lineTo(280,320);
ctx.lineTo(424,390);
ctx.closePath();
ctx.stroke();
//左边睫毛
ctx.beginPath();
ctx.moveTo(270,350);
ctx.lineTo(230,385);
ctx.lineTo(235,393);
ctx.lineTo(285,350);
ctx.closePath();
ctx.stroke();
//左眼
ctx.beginPath();
ctx.moveTo(235,393);
ctx.lineTo(255,425);
ctx.lineTo(305,440);
ctx.lineTo(390,430);
ctx.lineTo(410,405);
ctx.lineTo(410,385);
ctx.stroke();
ctx.beginPath();
ctx.arc(335,430,50,Math.PI*0.965,0);
ctx.stroke();
ctx.beginPath();
ctx.arc(320,407,20,0,Math.PI*2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(355,385);
ctx.lineTo(335,425);
ctx.lineTo(350,430);
ctx.lineTo(370,395);
ctx.stroke();
//右眉毛
ctx.beginPath();
ctx.moveTo(547,380);
ctx.lineTo(667,290);
ctx.lineTo(550,365);
ctx.closePath();
ctx.stroke();
//右睫毛
ctx.beginPath();
ctx.moveTo(550,388);
ctx.lineTo(630,335);
ctx.lineTo(675,329);
ctx.lineTo(700,359);
ctx.lineTo(695,365);
ctx.lineTo(665,329);
ctx.stroke();
//右眼
ctx.beginPath();
ctx.moveTo(560,380);
ctx.lineTo(570,420);
ctx.lineTo(645,425);
ctx.lineTo(685,405);
ctx.lineTo(690,360);
ctx.stroke();
ctx.beginPath();
ctx.arc(625,410,45,Math.PI*0.91,0);
ctx.stroke();
ctx.beginPath();
ctx.arc(610,390,20,0,Math.PI*2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(635,365);
ctx.lineTo(625,405);
ctx.lineTo(635,410);
ctx.lineTo(647,370);
ctx.stroke();
//嘴
ctx.beginPath();
ctx.moveTo(465,550);
ctx.lineTo(505,545);
ctx.lineTo(511,546);
ctx.stroke();
//鼻子
ctx.beginPath();
ctx.moveTo(480,490);
ctx.lineTo(495,495);
ctx.lineTo(505,485);
ctx.lineTo(505,465);
ctx.lineTo(490,475);
ctx.closePath();
ctx.stroke();
//左耳
ctx.beginPath();
ctx.moveTo(205,395);
ctx.lineTo(170,380);
ctx.stroke();
ctx.beginPath();
ctx.arc(165,400,20,1*Math.PI,1.6*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(145,400);
ctx.lineTo(147,460);
ctx.lineTo(220,535);
ctx.lineTo(260,550);
ctx.lineTo(308,550);
ctx.stroke();
ctx.beginPath();
ctx.arc(260,410,90,Math.PI*0.55,Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(160,410);
ctx.lineTo(180,410);
ctx.lineTo(205,430);
ctx.stroke();
//头发
ctx.beginPath();
ctx.moveTo(260,0);
ctx.quadraticCurveTo(76, 174, 150, 380);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(155,140);
ctx.lineTo(85,0);
ctx.lineTo(60,130);
ctx.lineTo(135,190);
ctx.lineTo(50,180);
ctx.lineTo(134,210);
ctx.stroke();
//刘海
ctx.beginPath();
ctx.moveTo(780, 0);
ctx.quadraticCurveTo(915 , 80, 900, 155);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(730, 60);
ctx.quadraticCurveTo(880 , 80, 900, 155);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(730, 60);
ctx.quadraticCurveTo(950, 200, 805, 345);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(780, 190);
ctx.quadraticCurveTo(810, 275, 805, 345);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(780, 190);
ctx.quadraticCurveTo(810, 275, 770, 365);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(780, 270);
ctx.quadraticCurveTo(790, 275, 770, 365);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(780, 270);
ctx.quadraticCurveTo(790, 275, 750, 365);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(750, 270);
ctx.quadraticCurveTo(760, 265, 750, 365);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(750, 270);
ctx.quadraticCurveTo(760, 265, 740, 355);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(720, 270);
ctx.quadraticCurveTo(730, 255, 740, 355);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(720, 270);
ctx.quadraticCurveTo(730, 255, 700, 355);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(650, 180);
ctx.quadraticCurveTo(720, 225, 700, 355);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(650, 180);
ctx.quadraticCurveTo(660, 195, 675, 315);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(620, 170);
ctx.quadraticCurveTo(660, 195, 675, 315);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(620, 170);
ctx.quadraticCurveTo(620, 324, 595, 323);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(610, 190);
ctx.quadraticCurveTo(615, 324, 595, 323);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(610, 190);
ctx.quadraticCurveTo(560, 324, 440, 393);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(555, 220);
ctx.quadraticCurveTo(560, 324, 440, 393);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(555, 220);
ctx.quadraticCurveTo(560, 324, 360, 393);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(435, 220);
ctx.quadraticCurveTo(435, 324, 360, 393);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(435, 220);
ctx.quadraticCurveTo(390, 314, 390, 353);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(395, 260);
ctx.quadraticCurveTo(380, 314, 390, 353);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(395, 260);
ctx.quadraticCurveTo(370, 314, 290, 343);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(355, 260);
ctx.quadraticCurveTo(340, 314, 290, 343);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(355, 260);
ctx.quadraticCurveTo(310, 314, 220, 343);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(315, 260);
ctx.quadraticCurveTo(300, 314, 220, 343);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(315, 260);
ctx.quadraticCurveTo(280, 314, 200, 343);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(280, 260);
ctx.quadraticCurveTo(240, 314, 205, 343);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(280, 260);
ctx.quadraticCurveTo(210, 314, 205, 343);
ctx.stroke();
//名字
ctx.font = "bold 50px Arial";
ctx.strokeText("えどがわコナン",620,600);
Canvas名侦探柯南-canvas练习的更多相关文章
- canvas 利用canvas中的globalCompositeOperation 绘制刮奖 效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- [Canvas] Make Canvas Responsive to Pixel Ratio
Canvas is great for high performance graphics rendering but by default the results look blocky on ph ...
- [canvas]用canvas绘制饼状图
折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- [canvas]利用canvas绘制自适应的折线图
前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...
- [ html canvas putImageData ] canvas绘图属性 putImageData 属性讲解
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- [ html canvas globalCompositeOperation ] canvas绘图属性 设置合成图像如何显示 属性演示
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- canvas.clipPath canvas.clipRect() 无效的原因
今天发现有些机型不能做到像QQ 透明截图那样的功能,本来能够的.一看是部分机器所有都是灰色半透明遮挡住了,没中间的透明效果,. 并且我不是通过遮挡,我是採用 裁剪的方式,至于裁剪代码百度有相关知识,具 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
随机推荐
- C++ WINDOWS 防多开
我们有些程序是可以同时运行多个进程,典型的像Visual Studio.但有些就能一次运行一个进程.比如Outlook.那你可能会问啥时可以让它同时打开多个应用程序,啥时只能一个啊.这个主要看进程间是 ...
- java 全局变量 的小结
利用关键字final声明常量,对于全局的常量(即在整个项目中都可用)通常按以下模式声明:public static final int MAX_VALUE=512 如果某常量只在本类使用,则应将其定义 ...
- 3、Kafka集群部署
Kafka集群部署 1)解压安装包 [ip101]$ tar -zxvf kafka_2.11-0.11.0.0.tgz -C /opt/app/ 2)修改解压后的文件名称 [ip101]$ mv k ...
- Linux 系统开启随机端口数量 调优
Linux系统随机端口 默认Linux系统开启的随机端口范围为 32768 ~ 65535.客户端连接服务监听端口需要使用到随机端口连接. Linux系统随机端口调优 1.添加内核配置参数:/etc/ ...
- WDTP注册破解
简介 WDTP 不止是一款开源免费的 GUI 桌面单机版静态网站生成器和简单方便的前端开发工具,更是一款跨平台的集笔记.个人知识管理.写作/创作.博客/网站内容与样式管理等功能于一体的多合一内容处理/ ...
- Linux常用命令——压缩解压命令
Linux常用命令——压缩解压命令 Linux gzip 描述:压缩文件 语法:gzip [文件名] 压缩后文件格式:.gz gunzip 描述:解压后缀为.gz的文件 语法:gunzip [文件名 ...
- 在 Linux 上使用 VirtualBox 的命令行管理界面
VirtualBox 拥有一套命令行工具,你可以使用 VirtualBox 的命令行界面 (CLI) 对远程无界面的服务器上的虚拟机进行管理操作.在这篇教程中,你将会学到如何在没有 GUI 的情况下使 ...
- 一个时代的终结：为什么是时候放弃ITOM四大巨头了？这对IT领导者来说意味着什么？
关注嘉为科技,获取运维新知 2018年7月,Broadcom宣布了收购CA Technologies的计划,收购额近190亿美元.虽然分析师对于芯片制造商收购企业级软件公司这件事是否值得还在进行激 ...
- WordCount基本功能
WordCount基本功能 码云地址:https://gitee.com/Joker_zou/WordCount.git 一.项目需求 WordCount的需求可以概括为:对程序设计语言源文件统计字符 ...
- openstack详细笔记-nova-glance-swift-cinder-keystone等
一.openstack各大模块 1.openstack总架构图 http://3ms.huawei.com/km/blogs/details/2655265 2.nova 2.0架构图 2.1 nov ...