前言:
如今我们对“用js画圆”都比较注重,同学们都想要知道一些“用js画圆”的相关知识。那么小编同时在网络上收集了一些对于“用js画圆””的相关知识,希望我们能喜欢,咱们一起来了解一下吧!今天,小编带大家用html和css,徒手画一个哆啦A梦和小黄人,顺带画个根据目前时间运行的小时钟,而且小黄人还有特效哦!
先给大家看看,完成后的效果吧;同时小编建议大家多多打代码,出来的效果很有成就感哦!
哆啦A梦版如下:
接下来画个小黄人:
当鼠标移动到小黄人时,效果是这样的:(效果在于眼睛、嘴巴、和提示框)
最后,顺带画个小时钟(可以运行的哦)
最后贴上代码(特别注意的是,为了时间一些效果等,文中会使用到简单的js,同时也需要jQuery文件):
第一部分:HTML部分的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(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 class="cat">
<div class="hair"><div class="hairs"></div></div>
<div class="cat1">
<div class="cat2"></div>
<div class="cat3"><div class="middle"></div></div>
<div class="eyes left1">
<span class="circle"><em></em></span>
</div>
<div class="eyes right1">
<span class="circle"><em></em></span>
</div>
<div class="mouth"></div>
<div class="glass left2"></div>
<div class="glass right2"></div>
<div class="trou left"></div>
<div class="trou right"></div>
<span class="lines left"></span>
<span class="lines right"></span>
<span class="line_middle"></span>
</div>
<div class="feet">
<div class="foot left3">
<div class="foot1"></div>
<div class="foot2"></div>
</div>
<div class="foot right3">
<div class="foot1"></div>
<div class="foot2"></div>
</div>
</div>
<div class="arm left"></div>
<div class="arm right"></div>
<div class="dialog">
<div class="tri"></div>
<div class="sen">嗨!</div>
<div class="line"></div>
</div>
</div>
<canvas id="canvas" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
</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;
}
最后,小编觉得以上的画不过是自己的兴趣同时也是举个例子,大家可以画出各种各样的你想要的图像,只要你动手画绝对没有问题。
标签: #用js画圆 #css画圆弧的方法 #jquery351漏洞 #jquery升级351后报错 #jqueryformjs295