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()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
随机推荐
- sql_mode 之 ignore_space
用于忽略mysql系统函数名与之后的括号之间的空格. 还是给个形像的说明吧如:count (*) 通过设置ignore_space 这个sql_mode 就可以把空格给忽略变成count(*) 1 ...
- LSTMs 长短期记忆网络系列
RNN的长期依赖问题 什么是长期依赖? 长期依赖是指当前系统的状态,可能受很长时间之前系统状态的影响,是RNN中无法解决的一个问题. 如果从(1) “ 这块冰糖味道真?”来预测下一个词,是很容易得出“ ...
- Unable to execute 'doFinal' with cipher instance
今天项目启动后登录项目,突然爆出Unable to execute 'doFinal' with cipher instance错误.清除cookie登录测试,又不报错了,以前也见过类似问题,因为不影 ...
- Gpload安装手册（Linux版本）
Gpload安装手册(Linux版本) 一.python 2.7版本 Linux系统默认是安装python2.7的,如果没有需要手动安装(python版本要求2.4.4以上): 通过命令:python ...
- Html table、thead、tr、th、td 标签
Html table.thead.tr.th.td 标签 案例一 <!-- table 表格标签,配置表格使用.border="1" 添加表格框架 --> <ta ...
- STS的安装与简单使用
一,STS下载与安装 1.下载地址:http://spring.io/tools3/sts/all 2.选择对应版本安装或者解压 二,STS简单使用 1.快捷方法 (1)main+alt+/+回车 = ...
- Learning-Python【26】：反射及内置方法
反射的概念 可以用字符串的方式去访问对象的属性,调用对象的方法(但是不能去访问方法),Python 中一切皆对象,都可以使用反射. 反射有四种方法: hasattr:hasattr(object, n ...
- 《Visual C#从入门到精通》第四章使用复合赋值和循环语句——读书笔记
第1章 使用复合赋值和循环语句 4.1 使用复合赋值操作符 任何算术操作符都可以像这样与赋值操作符合并,从而获得复合赋值操作符. 不要这样写 要这样写 Variable=Variable*number ...
- 查漏补缺之——Java多线程
复习面试题中遇到锁的内容当时大一学习的时候感觉懵懂,现在重新复习一下. 1.1多线程 1.1.1线程 1.什么是线程 线程是程序执行的一条路径,一个进程中包含多条进程 2.并行与并发 并行是两个任务同 ...
- [原][译][jsbsim]空气动力学模型库讨论JSBSim对比YASim
英文原文:JSBSim_vs_YASim 准确性和现实性飞行动力学模型的准确性和真实性是针对YASim的争论中提出的两个共同点.实际上,如果你给YASim或JSBSim垃圾参数,它们都将返回垃圾空气动 ...