必练案例来啦！用HTML和CSS徒手画哆啦A梦和小黄人

口天吴HZ 09-09 164

前言：

如今我们对“用js画圆”都比较注重，同学们都想要知道一些“用js画圆”的相关知识。那么小编同时在网络上收集了一些对于“用js画圆””的相关知识，希望我们能喜欢，咱们一起来了解一下吧！

今天，小编带大家用html和css，徒手画一个哆啦A梦和小黄人，顺带画个根据目前时间运行的小时钟，而且小黄人还有特效哦！

先给大家看看，完成后的效果吧；同时小编建议大家多多打代码，出来的效果很有成就感哦！

哆啦A梦版如下：

哆啦A梦

接下来画个小黄人：

无效果的小黄人

当鼠标移动到小黄人时，效果是这样的：（效果在于眼睛、嘴巴、和提示框）

鼠标悬停时的小黄人

最后，顺带画个小时钟（可以运行的哦）

可根据当前时间运行

最后贴上代码（特别注意的是，为了时间一些效果等，文中会使用到简单的js，同时也需要jQuery文件）：

第一部分：HTML部分的代码如下：

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

$(function(){

$('.cat1').hover(function(){

$('.dialog').addClass('dialogs');

$('.mouth').addClass('mouths');

$('.circle').addClass('circles');

},function(){

$('.dialog').removeClass('dialogs');

$('.mouth').removeClass('mouths');

$('.circle').removeClass('circles');

})

// 画机器猫

var ctx = document.getElementById('canvas').getContext('2d');

// 画矩形

function drawRect(x, y, w, h, l, colorStroke, colorFill) {

ctx.beginPath();

ctx.lineWidth = l;

ctx.strokeStyle = colorStroke;

ctx.fillStyle=colorFill;

ctx.fillRect(x,y,w,h);

ctx.strokeRect(x,y,w,h);

ctx.stroke();

ctx.fill();

ctx.closePath();

}

//画不规则四边形

function drawShape(x1,y1,x2,y2,x3,y3,x4,y4,w,colorStroke,colorFill){

ctx.beginPath();

ctx.strokeStyle = colorStroke;

ctx.fillStyle=colorFill;

ctx.lineWidth = w;

ctx.moveTo(x1,y1);

ctx.lineTo(x2,y2);

ctx.lineTo(x3,y3);

ctx.lineTo(x4,y4);

ctx.closePath();

ctx.stroke();

ctx.fill();

}

//画圆

function drawCircle(x, y, r, w, colorStroke, colorFill) {

ctx.beginPath();

ctx.lineWidth = w;

ctx.strokeStyle = colorStroke;

ctx.fillStyle=colorFill;

ctx.arc(x,y,r,0,Math.PI*2);

ctx.stroke();

ctx.fill();

ctx.closePath();

}

//画圆弧

function drawRound(x, y, r, w, colorStroke, colorFill, sa, ea, flag) {

ctx.beginPath();

ctx.lineWidth = w;

ctx.strokeStyle = colorStroke;

ctx.fillStyle=colorFill;

ctx.arc(x,y,r,sa,ea,flag);

ctx.stroke();

ctx.fill();

ctx.closePath();

}

//画圆角矩形

CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r, l, colorStroke, colorFill) {

if (w < 2 * r) r = w / 2;

if (h < 2 * r) r = h / 2;

this.beginPath();

this.lineWidth = l;

this.strokeStyle = colorStroke;

this.fillStyle = colorFill;

this.moveTo(x+r, y);

this.arcTo(x+w, y, x+w, y+h, r);

this.arcTo(x+w, y+h, x, y+h, r);

this.arcTo(x, y+h, x, y, r);

this.arcTo(x, y, x+w, y, r);

this.closePath();

return this;

}

//画椭圆

function EllipseTwo(context, x, y, a, b) {

context.save();

var r = (a > b) ? a : b;

var ratioX = a / r;

var ratioY = b / r;

context.scale(ratioX, ratioY);

context.beginPath();

context.fillStyle="green";

context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);

context.closePath();

context.restore();

context.fill();

}

//画线段

function drawLine(x, y, a, b, w, color) {

ctx.beginPath();

ctx.lineWidth = w;

ctx.strokeStyle = color;

ctx.moveTo(x, y);

ctx.lineTo(a, b);

ctx.stroke();

ctx.closePath();

}

drawCircle(258, 150, 120, 4, "#333", "#0cacd8");

drawCircle(258, 170, 90, 0, "#fff", "#fff");

drawCircle(255, 123, 16, 2, "#000", "#c83000");

ctx.roundRect(194,50,60,70,30,2,"#000","#fff").fill();

ctx.roundRect(194,50,60,70,30,2,"#000","#fff").stroke();

ctx.roundRect(255,50,60,70,30,2,"#000","#fff").fill();

ctx.roundRect(255,50,60,70,30,2,"#000","#fff").stroke();

drawCircle(242, 90, 7, 0, "#fff", "#000");

drawCircle(267, 90, 7, 0, "#fff", "#000");

drawLine(255, 140, 255, 220, 3, "#333");

drawLine(170, 150, 220, 160, 2, "#333");

drawLine(165, 170, 220, 170, 2, "#333");

drawLine(170, 195, 220, 180, 2, "#333");

drawLine(295, 160, 345, 145, 2, "#333");

drawLine(295, 170, 349, 170, 2, "#333");

drawLine(295, 180, 345, 195, 2, "#333");

drawRect(170,260,180,170,2,"#333","#00a0cc");

drawRound(255,150,85,2,"#333","transparent",Math.PI/4,Math.PI*3/4,false);

drawRound(260,320,85,4,"#000","#fff",Math.PI*5/4,Math.PI*7/4,true);

drawRound(260,320,60,4,"#000","#fff",0,Math.PI,false);

drawLine(198, 320, 321, 320, 2, "#000");

drawRound(260,431,11,3,"#000","#fff",0,Math.PI,true);

ctx.roundRect(152,427,104,30,15,2,"#000","#fff").fill();

ctx.roundRect(152,427,104,30,15,2,"#000","#fff").stroke();

ctx.roundRect(263,427,104,30,15,2,"#000","#fff").fill();

ctx.roundRect(263,427,104,30,15,2,"#000","#fff").stroke();

drawShape(169,270,169,335,125,352,95,311,2,"000","#0094bc");

drawShape(351,270,351,335,400,352,425,311,2,"000","#0094bc");

drawCircle(100, 340, 30, 4, "#000", "#fff");

drawCircle(420, 340, 30, 4, "#000", "#fff");

drawLine(170, 270, 170, 325, 3, "#0094bc");

drawLine(350, 270, 350, 325, 3, "#0094bc");

ctx.roundRect(165,250,190,20,10,2,"#000","#a01c00").fill();

ctx.roundRect(165,250,190,20,10,2,"#000","#a01c00").stroke();

drawCircle(255, 278, 20, 4, "#000", "#e4dc18");

drawCircle(255, 285, 6, 0, "transparent", "#000");

drawLine(255, 285, 255, 299, 3, "#000");

drawRect(236,270,38,4,2,"#333","#d4cc10");

})

window.onload=function(){

//画时钟

var canvas1 = document.getElementById('canvas1');

var ctx1 = canvas1.getContext('2d');

// 画圆

function drawCircle(x, y, r, w, colorStroke, colorFill) {

ctx1.save();

ctx1.beginPath();

ctx1.lineWidth = w;

ctx1.strokeStyle = colorStroke;

ctx1.fillStyle=colorFill;

ctx1.shadowOffsetX=3;

ctx1.shadowOffsetY=3;

ctx1.shadowBlur=15;

ctx1.shadowColor="#000";

ctx1.arc(x,y,r,0,Math.PI*2);

ctx1.stroke();

ctx1.fill();

ctx1.closePath();

ctx1.restore();

}

//画针

function drawLine(x, y, a, b, w, color, time) {

ctx1.save();

ctx1.lineWidth = w;

ctx1.strokeStyle = color;

ctx1.shadowOffsetX=1;

ctx1.shadowOffsetY=1;

ctx1.shadowBlur=5;

ctx1.shadowColor="#333";

ctx1.translate(250,250);

ctx1.rotate(time*Math.PI/180);

ctx1.beginPath();

ctx1.moveTo(x, y);

ctx1.lineTo(a, b);

ctx1.stroke();

ctx1.closePath();

ctx1.restore();

}

function drawClock(){

ctx1.clearRect(0,0,500,500);

var now = new Date();

var hour = now.getHours();

var min = now.getMinutes();

var sec = now.getSeconds();

hour = hour + min/60;

hour=hour>12?hour-12:hour;

drawCircle(250, 250, 200, 5, "#0000ff", "transparent");

for (var i = 0; i < 60; i++) {

ctx1.save();

if (i%5==0) {

ctx1.lineWidth = 7;

}else{

ctx1.lineWidth = 5;

}

ctx1.strokeStyle = "#000";

ctx1.translate(250,250);

ctx1.rotate(i*Math.PI/30);

ctx1.beginPath();

if(i%5==0){

ctx1.moveTo(0,-170);

}else{

ctx1.moveTo(0,-180);

}

ctx1.lineTo(0,-190);

ctx1.stroke();

ctx1.closePath();

ctx1.restore();

}

drawLine(0, -100, 0, 10, 7, "red", hour*30);

drawLine(0, -150, 0, 15, 4, "green", min*6);

drawLine(0, -185, 0, 20, 2, "purple", sec*6);

drawCircle(250, 250, 5, 5, "purple", "#fff");

}

drawClock();

setInterval(drawClock,1000);

}

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

第二部分：CSS部分的代码如下：

@charset "UTF-8";

margin: 0;

padding: 0;

list-style: none;

outline: none;

font-family: '微软雅黑';

}

.cat{

width: 500px;

height: 500px;

border: solid 1px cyan;

padding: 50px;

position: relative;

background-color: #c1fbff;

margin:0 auto;

}

.cat1{

width: 160px;

height: 280px;

background-color: #ffdc40;

border-radius: 80px;

position: absolute;

left: 50%;

top: 50%;

margin: -150px 0 0 -150px;

overflow: hidden;

border: solid 3px #000;

z-index: 99;

}

.cat2{

width: 240px;

height: 240px;

position: absolute;

bottom: -160px;

left: -50px;

background-color: #2074a0;

border: solid 3px #000;

}

.cat3{

width: 110px;

height: 40px;

position: absolute;

bottom: 83px;

left: 22px;

background-color: #2074a0;

border: solid 3px #000;

border-bottom-color: #2074a0;

}

.middle{

width: 52px;

height: 32px;

border: solid 3px #000;

border-radius: 0 0 15px 15px;

position: absolute;

left: 27px;

top: 25px;

}

.eyes{

width: 60px;

height: 60px;

border-radius: 50%;

border: solid 3px #000;

background-color: #fff;

position: absolute;

top: 40px;

z-index: 99;

}

.left1{

left: 14px;

}

.right1{

right: 14px;

}

.circle{

display: block;

width: 26px;

height: 26px;

border-radius: 50%;

background-color: #000;

position: absolute;

left: 13px;

top: 18px;

transition:.3s;

}

.circles{

left: 23px;

}

.circle em{

display: block;

width: 13px;

height: 13px;

border-radius: 50%;

background-color: #fff;

position: absolute;

left: 8px;

top: 5px;

}

.mouth{

width: 40px;

height: 12px;

border: solid 3px #000;

border-radius: 0 0 100% 100%;

background-color: #fff;

position: absolute;

left: 57px;

top: 120px;

transition:.3s;

}

.mouths{

transform:scale(1.2);

}

.glass{

width: 30px;

height: 10px;

background-color: #000;

position: absolute;

top: 70px;

z-index: 88;

}

.left2{

left: -5px;

transform:rotate(10deg);

}

.right2{

right: -5px;

transform:rotate(-10deg);

}

.feet{

width: 100px;

height: 45px;

position: absolute;

left: 183px;

bottom: 133px;

}

.foot1{

width: 22px;

height: 40px;

background-color: #000;

border-radius: 0 0 10px 0;

position: absolute;

bottom: 0;

}

.foot2{

width: 45px;

height: 23px;

background-color: #000;

position: absolute;

bottom: 0;

}

.left3 .foot1{

border-radius: 0 0 10px 0;

left: 23px;

}

.left3 .foot2{

border-radius: 16px 0 3px 6px;

left: 0px;

}

.right3 .foot1{

border-radius: 0 0 0px 10px;

right: 23px;

}

.right3 .foot2{

border-radius: 0 16px 6px 3px;

right: 0px;

}

.arm{

width: 50px;

height: 50px;

background-color: #fcdf3b;

border:solid 3px #000;

border-radius: 10px;

transform:rotate(45deg);

position: absolute;

top: 290px;

z-index: 77;

}

.arm.left{

left:133px;

}

.arm.right{

left:278px;

}

.trou{

width: 50px;

height: 12px;

border: solid 3px #000;

background-color: #1b7c9c;

position: absolute;

top: 133px;

}

.trou.left{

left:-16px;

transform:rotate(45deg);

}

.trou.right{

right:-16px;

transform:rotate(-45deg);

}

.lines{

display: block;

width: 30px;

height: 30px;

border-style: solid;

border-width: 3px;

border-radius: 50%;

position: absolute;

bottom: 50px;

}

.lines.left{

left:-14px;

border-color: transparent transparent #000 transparent;

transform:rotate(-45deg);

}

.lines.right{

right:-13px;

border-color: #000 transparent transparent transparent;

transform:rotate(-135deg);

}

.line_middle{

display: block;

width:3px;

height: 35px;

background-color: #000;

position: absolute;

bottom: 0;

left: 79px;

}

.hair{

width: 47px;

height:77px;

border-color: #000 #000 transparent transparent;

border-style: solid;

border-width: 0 6px;

border-radius: 50%;

position: absolute;

left: 168px;

top: 128px;

transform:rotate(-90deg);

}

.hairs{

width: 27px;

height:47px;

border-color: #000 #000 transparent transparent;

border-style: solid;

border-width: 0 3px;

border-radius: 50%;

position: absolute;

right: 2px;

top: 26px;

}

.dialog{

overflow: hidden;

width: 150px;

height: 75px;

position: absolute;

right: 160px;

top: 130px;

transition:.3s;

opacity: 0;

}

.sen{

width: 140px;

height: 70px;

border: solid 2px green;

border-radius: 100%;

color: orange;

font-weight: bold;

line-height: 70px;

text-align: center;

position: absolute;

right: 0px;

top: 0px;

}

.tri{

display: block;

width: 10px;

height: 10px;

transform:skewY(-45deg) rotate(-75deg);

border-style: solid;

border-width: 2px;

border-color: green transparent transparent green;

position: absolute;

bottom: 7px;

left: 20px;

}

.dialog .line{

width: 8px;

height: 3px;

background-color: #c1fbff;

transform:rotate(25deg);

position: absolute;

left: 23px;

top: 60px;

}

.dialogs{

opacity: 1;

right: 130px;

top: 100px;

}

#canvas{

display: block;

margin: 20px auto;

background:#fff;

border:solid 1px #ff6600;

}

#canvas1{

display: block;

background-color: #ffff00;

margin: 20px auto;

}

最后，小编觉得以上的画不过是自己的兴趣同时也是举个例子，大家可以画出各种各样的你想要的图像，只要你动手画绝对没有问题。

本文地址：http://www.longkongtuishu.com/caea0DWsCA1QFDlM.html

标签： #用js画圆 #css画圆弧的方法 #jquery351漏洞 #jquery升级351后报错 #jqueryformjs295

必练案例来啦！用HTML和CSS徒手画哆啦A梦和小黄人

好程序员：前端JavaScript全解析——Canvas绘制形状（下）

必练案例来啦！用HTML和CSS徒手画哆啦A梦和小黄人