整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ss已經(jīng)越來(lái)越強(qiáng)大了 ，可以使用它來(lái)繪制各種簡(jiǎn)單的形狀，用于代替圖片顯示，這次的分享主要用到畫(huà)圓，扇形
實(shí)現(xiàn)圓形
<div class="circle"></div><style>.circle { border-radius: 50%; width: 80px; height: 80px; background: #666;}</style>
效果如下：
border-radius圓角的四個(gè)值按順序取值分別為：左上、右上、右下、左下。這里只設(shè)置一個(gè)值，代表四個(gè)角的取值都為為50%
原理：
border-radius: 50% 彎曲元素的邊框以創(chuàng)建圓。
由于圓在任何給定點(diǎn)具有相同的半徑，故寬和高都需要保證一樣的值，不同的值將創(chuàng)建橢圓。
實(shí)現(xiàn)扇形
利用border-radius，實(shí)現(xiàn)90度角的扇形：
<div class="sector"></div><style>.sector{ border-radius:80px 0 0; width: 80px; height: 80px; background: #666;}</style>
效果如下：
原理：
左上角是圓角，其余三個(gè)角都是直角：左上角的值為寬和高一樣的值，其他三個(gè)角的值不變（等于0）。
2、繪制任意角度的扇形
效果如下：
/繪制一個(gè)60度扇形/
/繪制一個(gè)85度扇形/
/繪制一個(gè)向右扇形，90度扇形/
/*繪制一個(gè)顏色扇形 */
/*繪制一個(gè)不同顏色半圓夾角 */
完整代碼如下：
<div class="shanxing shanxing1"> <div class="sx1"></div> <div class="sx2"></div></div><!--*繪制一個(gè)85度扇形*/--p><div class="shanxing shanxing2"> <div class="sx1"></div> <div class="sx2"></div></div><!--*繪制一個(gè)向右扇形，90度扇形*--><div class="shanxing shanxing3"> <div class="sx1"></div> <div class="sx2"></div></div><!--*繪制一個(gè)顏色扇形 */--p><div class="shanxing shanxing4"> <div class="sx1"></div> <div class="sx2"></div></div><!--/*繪制一個(gè)不同顏色半圓夾角 */--><div class="shanxing shanxing5"> <div class="sx1"></div> <div class="sx2"></div></div><style>.shanxing{ position: relative; width: 200px; height: 200px; border-radius: 100px; background-color: yellow;}.sx1{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); /*這個(gè)clip屬性用來(lái)繪制半圓，在clip的rect范圍內(nèi)的內(nèi)容顯示出來(lái)，使用clip屬性，元素必須是absolute的 */ border-radius: 100px; background-color: #f00; /*-webkit-animation: an1 2s infinite linear; */}.sx2{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); border-radius: 100px; background-color: #f00; /*-webkit-animation: an2 2s infinite linear;*/}/*繪制一個(gè)60度扇形*/.shanxing1 .sx1{transform: rotate(-30deg);}.shanxing1 .sx2{transform: rotate(-150deg);}/*繪制一個(gè)85度扇形*/.shanxing2 .sx1{transform: rotate(-45deg);}.shanxing2 .sx2{transform: rotate(-140deg);}/*繪制一個(gè)向右扇形，90度扇形*/.shanxing3 .sx1{transform: rotate(45deg);}.shanxing3 .sx2{transform: rotate(-45deg);}/*繪制一個(gè)顏色扇形 */.shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;}.shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}/*繪制一個(gè)不同顏色半圓夾角 */.shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;}.shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0; </style>
前端的專業(yè)程度很強(qiáng)，80%的問(wèn)題自己很難解決，而且會(huì)很浪費(fèi)時(shí)間，一個(gè)小問(wèn)題可以困擾一天，這樣自信心會(huì)受到嚴(yán)重的打擊！
本文完~
anvas畫(huà)了一個(gè)圓
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas-3圓的繪制</title>
</head>
<body>
<canvas id="canvas1" width="600" height="600" style="border:1px solid #000000"></canvas>
<script type="text/javascript">
var canvas1 = document.querySelector("#canvas1") // 1.找到畫(huà)布對(duì)象
var ctx = canvas1.getContext("2d") // 2.上下文對(duì)象（畫(huà)筆）
// (圓心x：300, 圓心y：300, 半徑r：100, 開(kāi)始角度：0 , 結(jié)束角度：360度, 默認(rèn)為false（可不寫(xiě)）是順時(shí)針，true為逆時(shí)針)
ctx.arc(300, 300, 100, 0, 2*Math.PI)
ctx.stroke()
</script>
</body>
</html>
天，小編帶大家用html和css，徒手畫(huà)一個(gè)哆啦A夢(mèng)和小黃人，順帶畫(huà)個(gè)根據(jù)目前時(shí)間運(yùn)行的小時(shí)鐘，而且小黃人還有特效哦！
先給大家看看，完成后的效果吧；同時(shí)小編建議大家多多打代碼，出來(lái)的效果很有成就感哦！
哆啦A夢(mèng)版如下：
哆啦A夢(mèng)
接下來(lái)畫(huà)個(gè)小黃人：
無(wú)效果的小黃人
當(dāng)鼠標(biāo)移動(dòng)到小黃人時(shí)，效果是這樣的：（效果在于眼睛、嘴巴、和提示框）
鼠標(biāo)懸停時(shí)的小黃人
最后，順帶畫(huà)個(gè)小時(shí)鐘（可以運(yùn)行的哦）
可根據(jù)當(dāng)前時(shí)間運(yùn)行
最后貼上代碼（特別注意的是，為了時(shí)間一些效果等，文中會(huì)使用到簡(jiǎn)單的js，同時(shí)也需要jQuery文件）：
<!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');
})
// 畫(huà)機(jī)器貓
var ctx = document.getElementById('canvas').getContext('2d');
// 畫(huà)矩形
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();
}
//畫(huà)不規(guī)則四邊形
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();
}
//畫(huà)圓
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();
}
//畫(huà)圓弧
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();
}
//畫(huà)圓角矩形
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;
}
//畫(huà)橢圓
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();
}
//畫(huà)線段
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(){
//畫(huà)時(shí)鐘
var canvas1 = document.getElementById('canvas1');
var ctx1 = canvas1.getContext('2d');
// 畫(huà)圓
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();
}
//畫(huà)針
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>
@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;
}
最后，小編覺(jué)得以上的畫(huà)不過(guò)是自己的興趣同時(shí)也是舉個(gè)例子，大家可以畫(huà)出各種各樣的你想要的圖像，只要你動(dòng)手畫(huà)絕對(duì)沒(méi)有問(wèn)題。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
