用css3 繪制畫圓與扇形

ss已經越來越強大了，可以使用它來繪制各種簡單的形狀，用于代替圖片顯示，這次的分享主要用到畫圓，扇形

實現圓形

<div class="circle"></div><style>.circle { border-radius: 50%; width: 80px; height: 80px; background: #666;}</style>

效果如下：

border-radius圓角的四個值按順序取值分別為：左上、右上、右下、左下。這里只設置一個值，代表四個角的取值都為為50%

原理：

border-radius: 50% 彎曲元素的邊框以創建圓。
由于圓在任何給定點具有相同的半徑，故寬和高都需要保證一樣的值，不同的值將創建橢圓。

實現扇形

利用border-radius，實現90度角的扇形：

<div class="sector"></div><style>.sector{ border-radius:80px 0 0; width: 80px; height: 80px; background: #666;}</style>

效果如下：

原理：

左上角是圓角，其余三個角都是直角：左上角的值為寬和高一樣的值，其他三個角的值不變（等于0）。

2、繪制任意角度的扇形

效果如下：

/繪制一個60度扇形/

/繪制一個85度扇形/

/繪制一個向右扇形，90度扇形/

/*繪制一個顏色扇形 */

/*繪制一個不同顏色半圓夾角 */

完整代碼如下：

<div class="shanxing shanxing1"> <div class="sx1"></div> <div class="sx2"></div></div><!--*繪制一個85度扇形*/--p><div class="shanxing shanxing2"> <div class="sx1"></div> <div class="sx2"></div></div><!--*繪制一個向右扇形，90度扇形*--><div class="shanxing shanxing3"> <div class="sx1"></div> <div class="sx2"></div></div><!--*繪制一個顏色扇形 */--p><div class="shanxing shanxing4"> <div class="sx1"></div> <div class="sx2"></div></div><!--/*繪制一個不同顏色半圓夾角 */--><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); /*這個clip屬性用來繪制半圓，在clip的rect范圍內的內容顯示出來，使用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;*/}/*繪制一個60度扇形*/.shanxing1 .sx1{transform: rotate(-30deg);}.shanxing1 .sx2{transform: rotate(-150deg);}/*繪制一個85度扇形*/.shanxing2 .sx1{transform: rotate(-45deg);}.shanxing2 .sx2{transform: rotate(-140deg);}/*繪制一個向右扇形，90度扇形*/.shanxing3 .sx1{transform: rotate(45deg);}.shanxing3 .sx2{transform: rotate(-45deg);}/*繪制一個顏色扇形 */.shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;}.shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}/*繪制一個不同顏色半圓夾角 */.shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;}.shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0; </style>

前端的專業程度很強，80%的問題自己很難解決，而且會很浪費時間，一個小問題可以困擾一天，這樣自信心會受到嚴重的打擊！

本文完~

anvas畫了一個圓

<!DOCTYPE html>

<html>

<head>

<title>canvas-3圓的繪制</title>

</head>

<body>

var canvas1 = document.querySelector("#canvas1") // 1.找到畫布對象

var ctx = canvas1.getContext("2d") // 2.上下文對象（畫筆）

// (圓心x：300, 圓心y：300, 半徑r：100, 開始角度：0 , 結束角度：360度, 默認為false（可不寫）是順時針，true為逆時針)

ctx.arc(300, 300, 100, 0, 2*Math.PI)

ctx.stroke()

</script>

</body>

</html>

天，小編帶大家用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;

}

最后，小編覺得以上的畫不過是自己的興趣同時也是舉個例子，大家可以畫出各種各樣的你想要的圖像，只要你動手畫絕對沒有問題。

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

用css3 繪制畫圓與扇形

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

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

您的項目需求