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()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
随机推荐
- HTML5的自定义属性的使用总结
https://blog.csdn.net/qq_31851435/article/details/53100691 <div id="myDiv" data-attribu ...
- JS设计模式（1）单例模式
什么是单例模式 定义:1.只有一个实例.2.可以全局访问 主要解决:一个全局使用的类频繁地创建与销毁. 何时使用:当您想控制实例数目,节省系统资源的时候. 如何解决:判断系统是否已经有这个单例,如果有 ...
- JS(JavaScript）的初了解3（更新中···）
1. {} 在JS中我们把它叫代码块.如果代码块里的内容没有执行完,语句不会向下执行. 代码块是一个独立的整体.如果JS中某一条语句出错,那么就会在此终止不会向下执行. 2. 循环语句 循环,就是对一 ...
- SAP Fiori Client
iPhone资源->iPhone商务软件 SAP Fiori Client 固件要求:需要 iOS 9.0 或更高版本.与 iPhone.iPad 和 iPod touch 兼容. 利用适用于 ...
- POJ 1088 滑雪（模板题 DFS+记忆化）
Description Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道 ...
- 一起用ipython
安装 安装python2版本的软件包就用命令 pip install ipython 安装python3版本对应的软件包就用命令 pip3 install ipython 进入了ipython,ipy ...
- postman(四)：添加变量
在进行API测试的时候,不同接口之间有时会用到同样的参数,甚至有些值都很少会改变,比如每个请求的ip和端口. 为了提高用例的可读性以及可维护性,可以利用postman的“变量”把经常用到的“固定值”抽 ...
- JAVA文件操作类和文件夹的操作代码示例
JAVA文件操作类和文件夹的操作代码实例,包括读取文本文件内容, 新建目录,多级目录创建,新建文件,有编码方式的文件创建, 删除文件,删除文件夹,删除指定文件夹下所有文件, 复制单个文件,复制整个文件 ...
- 微信小程序 密码键盘 - 密码页面组件 (原生小程序代码)
1.WXML页面 <view> <!--<section class="mask" catchtap="canclePwd" wx:if ...
- 查看值是否传过来php
<input value='{{mid}}'></input> <input value='{{share}}'></input>