CSS作圖（二），純CSS代碼畫出精致逼真的圖像，學起來啊

SS的強大和精妙，只有在認真研讀其代碼之后才會深刻明白。

今日繼續(xù)用純CSS畫圖，并給大家整理了本文中所有代碼，需要的小伙伴可以私信我哦。

一、陰陽

首先，用CSS畫一個陰陽圖，如下：

代碼也很簡單：

#yin-yang {
 width: 96px;
 height: 48px;
 background: #eee;
 border-color: red;
 border-style: solid;
 border-width: 2px 2px 50px 2px;
 border-radius: 100%;
 position: relative;
}
 
#yin-yang:before {
 content: "";
 position: absolute;
 top: 50%;
 left: 0;
 background: #eee;
 border: 18px solid red;
 border-radius: 100%;
 width: 12px;
 height: 12px;
}
 
#yin-yang:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 background: red;
 border: 18px solid #eee;
 border-radius:100%;
 width: 12px;
 height: 12px;
}

當然，顏色什么的，可以隨便改啦~

二、雞蛋

再畫一個可愛的雞蛋~~~像這樣：

代碼僅僅幾句話：

#egg {
 display:block;
 width: 126px;
 height: 180px;
 background-color: red;
 -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

三、最后畫一個彎彎的月亮~

長這樣：

代碼非常非常少：

#moon {

width: 80px;

height: 80px;

border-radius: 50%;

box-shadow: 15px 15px 0 0 red;

}

是不是很神奇？不敢相信這幾句代碼居然有這樣的功力？

那就打開電腦，按照我之前講的方法創(chuàng)建一個html試試吧~

不知道怎么創(chuàng)建的小伙伴看這里>>css3制作圖形大全：簡單幾句代碼畫出漂亮的圖形，一起來看看吧~

于學習js是為爬蟲服務(wù)，所以canvas繪圖學習并不完整。

第15章使用Canvas繪圖

15.1 基本用法

HTML文件中需要有canvas元素，兩標簽之間的文字是瀏覽器不支持時顯示的。

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>

要在網(wǎng)頁中顯示canvas繪制的圖像，只需要在畫布上繪制圖形即可：

var drawing = document.getElementById("drawing");

if (drawing.getContext){
    var context = drawing.getContext("2d");

    context.fillStyle = "#0000ff";
    context.fillRect(10,10,50,50);

    context.fillStyle = "rgba(0,0,255,0.5)";
    context.fillRect(30,30,50,50);
}

也可以通過toDataURL輸出到圖像，并創(chuàng)建新的img：

var drawing = document.getElementById("drawing");

// 取得圖像的數(shù)據(jù)URI
var imgURI = drawing.toDataURL("image/png");
// 顯示圖像

var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);

15.2 2D上下文

15.2.1 填充和描邊

可通過strokeStyle和fillStyle屬性進行設(shè)置

var context = drawing.getContext("2d");
context.strokeStyle = "red";
context.fillStyle = "#0000ff";

設(shè)置屬性有以下幾種：

"red"
"#0000ff"
"rgba(0,0,255,0.5)"
context.strokeStyle = "red";

15.2.2 繪制矩形

繪制矩形有fillRect（帶有填充）、strokeRect（無填充）、clearRect（除清矩形區(qū)域）三個方法，單位為像素：

var drawing = document.getElementById("drawing");

if (drawing.getContext){
    var context = drawing.getContext("2d");
    // 紅色的矩形

    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);
    // 半透明的矩形

    context.fillStyle = "rgba(0,0,255,0.5)";
    context.fillRect(30,30,50,50);
}

15.2.3 繪制路徑

以beginPath()方法開始，然后接著繪制以下線條：

arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)為圓心繪制一條弧線，弧線半徑為radius，起始和結(jié)束角度（用弧度表示）分別為startAngle 和endAngle。最后一個參數(shù)表示
startAngle 和endAngle 是否按逆時針方向計算，值為false表示按順時針方向計算。
arcTo(x1, y1, x2, y2, radius)：從上一點開始繪制一條弧線，到(x2,y2)為止，并且以給定的半徑radius 穿過(x1,y1)。
bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：從上一點開始繪制一條曲線，到(x,y)為止，并且以(c1x,c1y)和(c2x,c2y)為控制點。
lineTo(x, y)：從上一點開始繪制一條直線，到(x,y)為止。
moveTo(x, y)：將繪圖游標移動到(x,y)，不畫線。
quadraticCurveTo(cx, cy, x, y)：從上一點開始繪制一條二次曲線，到(x,y)為止，并且以(cx,cy)作為控制點。
rect(x, y, width, height)：從點(x,y)開始繪制一個矩形，寬度和高度分別由width 和height 指定。這個方法繪制的是矩形路徑，而不是strokeRect()和fillRect()所繪制的獨立的形狀。

路徑創(chuàng)建完以后，有多種結(jié)尾方式：

closePath()會自動與起點連接；
fill()會自動以fillStyle填充區(qū)域；
stroke()會對線條描邊；
clip()創(chuàng)建一個剪切區(qū)域。

15.2.4 繪制文本

方法：

fillText()
strokeText()

屬性：

font
textAlign start、end、left、right、center
textBaseline top、hanging、middle、alphabetic、ideographic、bottom

周在給學生講授JavaScript課程中setInterval方法時，想到了我們在網(wǎng)上看到的各類GIF動圖比較有意思，就將其引入到教學中，教學內(nèi)容設(shè)計如果通過HTML5與JavaScript實現(xiàn)網(wǎng)頁類似GIF效果的動態(tài)圖。于是在網(wǎng)上搜集了部分gif格式動圖，將每一個Gif動圖分解為一組jpg格式圖片，再采用setInterval與html5 Canvas進行動畫的實現(xiàn)。通過學習可以讓學生進一步了解canvas動畫實現(xiàn)的過程與原理。并將其發(fā)布到頭條，也希望對有興趣的初學者了解HTML5 Canvas等有所幫助。圖片分組圖片素材如下：

素材一

實現(xiàn)動畫的素材我們已經(jīng)給出，主要通過gif動圖導出一組圖片，下面對html5動畫實現(xiàn)過程進行簡單說明。

基本思路

實現(xiàn)其動畫的基本思路是通過HTML5提供的canvas元素進行圖片的繪制與展示，借助setInterval方法實現(xiàn)間隔指定時間調(diào)用新的圖片實現(xiàn)重新繪圖。其中繪圖主要使用drawImage方法進行繪圖，最終通過圖片依次重繪實現(xiàn)動畫效果。具體實現(xiàn)過程如下：

HTML5 Canvas設(shè)置

在頁面body部分添加Canva標簽，設(shè)置其id屬性為canv，寬度為600，高度為400,編寫代碼描述如下圖：

添加畫布元素

canvas瀏覽效果

加載圖片資源

使用Canvas借助JavaScript提供的drawImage方法進行繪圖，需要提供要繪制的圖片資源即繪圖的坐標位置。該方法原型如下：

drawImage方法原型

因此我們需要加載圖片資源，本例由于需要調(diào)用多個img實現(xiàn)定時不同圖片的繪制，因此我們可以使用數(shù)組存儲所加載的圖片資源。本例圖片數(shù)量為14，因此我們數(shù)組長度為14。使用素組存儲圖片實現(xiàn)代碼如下：

加載圖片資源代碼

定義頁面加載事件onload

本例設(shè)計在頁面加載時自動播放動畫，因此需要在JavaScript腳本中添加頁面onload事件，在事件中編寫繪圖相關(guān)代碼，主要代碼包括獲取畫布canva與實例化繪圖對象context。部分代碼描述如下：

onload事件及繪圖初始化

使用setInterval實現(xiàn)動畫

使用setInterval方法實現(xiàn)動畫主要需要定義回調(diào)函數(shù)與回調(diào)函數(shù)觸發(fā)執(zhí)行的周期，本例中我們使用匿名函數(shù)作為回調(diào)函數(shù)，觸發(fā)周期設(shè)置為100毫秒。setInterval函數(shù)定義如下：

setInterval函數(shù)

在定義完函數(shù)之后可在其匿名函數(shù)函數(shù)體部分寫入繪圖方法dramImage(),實現(xiàn)周期調(diào)用不同圖片資源進行繪圖，最終展示出動畫效果。為了保證循環(huán)調(diào)用14張圖片，我們需要設(shè)置一計數(shù)全局變量i，由于我們圖片采用數(shù)組存儲，下標為數(shù)組，且從0-13進行編號，因此當計數(shù)值小于13時自動+1，指向下一數(shù)組下標，當為13時，設(shè)置計數(shù)值為0，回到數(shù)組第一元素，最終實現(xiàn)數(shù)組訪問下標的循環(huán)。setInterval實現(xiàn)完整代碼如下：

setInterval完整代碼

實現(xiàn)效果展示

HTML動畫效果展示

本頭條號長期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯(lián)系作者，共同探討。期待大家關(guān)注！如需案例完整代碼請關(guān)注并私信，往期前端設(shè)計文章鏈接如下：

前端設(shè)計-JavaScript中的值、引用傳遞與垃圾回收
前端設(shè)計-JavaScript美女拼圖游戲開發(fā)實例
前端設(shè)計- JavaScript驗證碼制作及實例分析
前端設(shè)計-Ajax技術(shù)及實例展示
前端設(shè)計-響應(yīng)式頁面開發(fā)基礎(chǔ)
Web開發(fā)前端、后端與全棧的區(qū)別是什么？

在線咨詢

上一篇：如何解決HTML頁面白屏問題
下一篇：CSS自動換行、強制不換行、強制斷行、超出顯示省略號

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

CSS作圖（二），純CSS代碼畫出精致逼真的圖像，學起來啊

一、陰陽