canvas画小叮当
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小叮当</title>
<style>
.container{
margin: 0 auto;
width: 800px;
}
body{
margin: 0;
padding: 0;
}
#doraemon{
background-color: #fff;
display: block;
}
</style>
</head>
<body onmousemove="zuobiao(event)">
<div class="container">
<canvas id="doraemon" width="600" height="600"></canvas>
</div>
<div id="put" style="width: 50px" height="20px"; ></div>
<script>
window.onload=function(){
var cxt=document.getElementById('doraemon').getContext('2d');
/*绘制小叮当头部*/
cxt.beginPath();//开始作图标志
cxt.lineWidth=1;//线宽为1
cxt.strokeStyle='#000';//线条的颜色
cxt.arc(200,175,175,0.7*Math.PI,0.3*Math.PI);
cxt.fillStyle='#0bb0da';
cxt.fill();
cxt.stroke();//绘制路径 /*画脸*/
cxt.beginPath();
cxt.fillStyle='#fff';
cxt.moveTo(110,110);
cxt.quadraticCurveTo(-10,200,120,315);
cxt.lineTo(280,315);
cxt.quadraticCurveTo(410,210,290,110);
cxt.lineTo(110,110);
cxt.fill();
cxt.stroke(); /*眼睛*/
cxt.beginPath();
cxt.lineWidth = 1;
cxt.fillStyle = '#fff';
cxt.moveTo(110, 110);
cxt.bezierCurveTo(110, 25, 200, 25, 200, 100);//创建三次贝塞尔曲线,控制点1(110,25),控制点2(200,25),结束点(200,100),也就是画左上半椭圆
cxt.bezierCurveTo(200, 175, 110, 175, 110, 100);//画左下半椭圆
cxt.moveTo(200, 100);
cxt.bezierCurveTo(200, 25, 290, 25, 290, 100);
cxt.bezierCurveTo(290, 175, 200, 175, 200, 100);
cxt.fill();
cxt.stroke(); /*左眼球*/
cxt.beginPath();
cxt.fillStyle="red";
cxt.arc(170,130,15,0,2*Math.PI);
cxt.fill();
cxt.stroke(); /*右眼球*/
cxt.beginPath();
cxt.fillStyle="red";
cxt.arc(230,130,15,0,2*Math.PI);
cxt.fill();
cxt.stroke(); /*鼻子*/
cxt.beginPath();
cxt.fillStyle="red";
cxt.arc(200,165,25,0,2*Math.PI);
cxt.fill();
cxt.stroke(); /*胡子*/
//左胡须
cxt.beginPath();
cxt.moveTo(80, 175);
cxt.lineTo(150, 195);
cxt.moveTo(80, 200);
cxt.lineTo(150, 205);
cxt.moveTo(80, 225);
cxt.lineTo(150, 215);
//中部胡须
cxt.moveTo(200, 195);
cxt.lineTo(200, 290);
//右胡须
cxt.moveTo(250, 195);
cxt.lineTo(320, 175);
cxt.moveTo(250, 205);
cxt.lineTo(320, 200);
cxt.moveTo(250, 215);
cxt.lineTo(320, 225);
cxt.stroke();
/*嘴*/
cxt.moveTo(80, 240);
cxt.quadraticCurveTo(200, 350, 320, 240);
cxt.stroke(); //狗链
cxt.beginPath();
cxt.moveTo(96, 316);
cxt.lineTo(305, 316);
cxt.lineTo(320, 316);
cxt.arcTo(330, 316, 330, 326, 10);//在画布上创建介于两个切线之间的弧,起点坐标为(330,316),终点坐标为(330,326),半径为10
cxt.lineTo(330, 336);
cxt.arcTo(330, 346, 305, 346, 10);
cxt.lineTo(81, 346);
cxt.arcTo(71, 346, 71, 336, 10);
cxt.lineTo(71, 326);
cxt.arcTo(71, 316, 81, 316, 10);
cxt.lineTo(96, 316);
cxt.fillStyle = '#b13209';
cxt.fill();
cxt.stroke();
/*下半身*/
cxt.beginPath();
cxt.fillStyle = '#0bb0da';
cxt.moveTo(80, 346);
//左衣服
cxt.lineTo(26, 406);
cxt.lineTo(65, 440);
cxt.lineTo(85, 418);
cxt.lineTo(85, 528);
cxt.lineTo(185, 528);
//右衣服
cxt.lineTo(315, 528);
cxt.lineTo(315, 418);
cxt.lineTo(337, 440);
cxt.lineTo(374, 406);
cxt.lineTo(320, 346);
cxt.fill();
cxt.stroke();
/*手*/
//左手
cxt.beginPath();
cxt.fillStyle = '#fff';
cxt.arc(37, 433, 30, 0, 2 * Math.PI);
cxt.fill();
cxt.stroke();
//右手
cxt.beginPath();
cxt.fillStyle = '#fff';
cxt.arc(363, 433, 30, 0, 2 * Math.PI);
cxt.fill();
cxt.stroke();
/*肚*/
cxt.beginPath();
cxt.fillStyle = '#fff';
cxt.arc(200, 400, 91, 1.8 * Math.PI, 1.2 * Math.PI);
cxt.fill();
cxt.stroke();
//小口袋
cxt.beginPath();
cxt.fillStyle = '#fff';
cxt.moveTo(130, 394);
cxt.lineTo(270, 394);
cxt.moveTo(130, 394);
cxt.bezierCurveTo(130, 490, 270, 490, 270, 394);
cxt.fill();
cxt.stroke();
/*两只脚的空隙*/
cxt.beginPath();
cxt.fillStyle = '#fff';
cxt.arc(200, 529, 20,Math.PI, 0);
cxt.fill();
cxt.stroke();
/*脚*/
//左脚
cxt.beginPath();
cxt.fillStyle='#fff';
cxt.moveTo(180,528);
cxt.lineTo(72,528);
cxt.bezierCurveTo(52,528,52,558,72,558);
cxt.lineTo(180,558);
cxt.moveTo(180,558);
cxt.bezierCurveTo(200,558,200,528,180,528);
cxt.fill();
cxt.stroke();
//右脚
cxt.beginPath();
cxt.fillStyle='#fff';
cxt.moveTo(220,528);
cxt.lineTo(328,528);
cxt.bezierCurveTo(348,528,348,558,328,558);
cxt.lineTo(220,558);
cxt.moveTo(220,558);
cxt.bezierCurveTo(200,558,200,528,220,528);
cxt.fill();
cxt.stroke(); } function zuobiao(event){
var x=event.clientX;
var y=event.clientY;
var out=document.getElementById("put");
out.innerHTML="x:"+x+"y:"+y;
}
</script>
</body>
</html>
canvas画小叮当的更多相关文章
- 使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
- canvas 画圈 demo
html代码: <canvas id="clickCanvas2" width="180" height="180" data-to ...
- 踩个猴尾不容易啊 Canvas画个猴子
踩个猴尾不容易啊 Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- canvas画随机闪烁的星星
canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...
- canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Canvas画椭圆的方法
虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生 oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...
- 深夜,用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- 樱花的季节,教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...
- HTML5之Canvas画圆形
HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...
随机推荐
- Android:JNI强化训练
一.前言 Java本机接口(Java Native Interface (JNI))是本机编程接口,它是JDK的一部分,JNI它提供了若干的API,实现了和Java和其他通信(主要是C&C++ ...
- LeetCode 102 二叉树的层次遍历
题目: 给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如:给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 7 ...
- linux下anaconda和keras配置过程
连接服务器,使用ssh协议. 下载anaconda bash Anaconda3-5.1.0-Linux-x86_64.sh(安装过程需要输入yes来添加环境变量,需要输入一次安装路径.) 因为环境变 ...
- 通过Mybatis原始Dao来实现curd操作
环境的配置见我上一篇博客. 首先,在上一篇博客中,我们知道,SqlSession中封装了对数据库的curd操作,通过sqlSessionFactory可以创建SqlSession,而SqlSessio ...
- 关于Java方法重载
今天在做项目的时候发现一个问题,如果有两个方法是重载的,而且他们的参数一个是父类,一个是子类,那么调用的时候会调用哪个函数呢? 做了个测试,发现调用的是子类. 例子: public class Ani ...
- 第三次scrum冲刺
第三次冲刺 一.第三次冲刺任务 ! 在已有的基础上实现图书馆管理员对图书信息的查询以及对图书借阅情况的查询. 二.用户故事 本次的用户是图书馆的管理员 用户输入对应的管理员的账号和密码 用户选择图书 ...
- 数据结构—头插法逆转单链表——空间复杂度为O(1)
#if 1 #include<stdio.h> #include<stdlib.h> #include<iostream> using namespace std; ...
- Arch i3wm
pacman -S i3-gaps i3blocks i3status dmenu xprofile设置 nano /home/user/,xprofile export LANG=zh_CN.UTF ...
- 合肥工业大学oj G-诺德森海岸
#include<iostream> #include<vector> #include<bits/stdc++.h> using namespace std; v ...
- L2-007 家庭房产 (25 分)
L2-007 家庭房产 (25 分) 给定每个人的家庭成员和其自己名下的房产,请你统计出每个家庭的人口数.人均房产面积及房产套数. 输入格式: 输入第一行给出一个正整数N(≤),随后N行,每行按下 ...