整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS的強大和精妙，只有在認真研讀其代碼之后才會深刻明白。
今日繼續用純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;
}
是不是很神奇？不敢相信這幾句代碼居然有這樣的功力？
那就打開電腦，按照我之前講的方法創建一個html試試吧~
不知道怎么創建的小伙伴看這里>>css3制作圖形大全：簡單幾句代碼畫出漂亮的圖形，一起來看看吧~
于學習js是為爬蟲服務，所以canvas繪圖學習并不完整。
HTML文件中需要有canvas元素，兩標簽之間的文字是瀏覽器不支持時顯示的。
<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>要在網頁中顯示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輸出到圖像，并創建新的img：
var drawing = document.getElementById("drawing");
// 取得圖像的數據URI
var imgURI = drawing.toDataURL("image/png");
// 顯示圖像
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);可通過strokeStyle和fillStyle屬性進行設置
var context = drawing.getContext("2d");
context.strokeStyle = "red";
context.fillStyle = "#0000ff";設置屬性有以下幾種：
"red"
"#0000ff"
"rgba(0,0,255,0.5)"
context.strokeStyle = "red";繪制矩形有fillRect（帶有填充）、strokeRect（無填充）、clearRect（除清矩形區域）三個方法，單位為像素：
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);
}以beginPath()方法開始，然后接著繪制以下線條：
路徑創建完以后，有多種結尾方式：
方法：
fillText()
strokeText()屬性：
font
textAlign start、end、left、right、center
textBaseline top、hanging、middle、alphabetic、ideographic、bottom
周在給學生講授JavaScript課程中setInterval方法時，想到了我們在網上看到的各類GIF動圖比較有意思，就將其引入到教學中，教學內容設計如果通過HTML5與JavaScript實現網頁類似GIF效果的動態圖。于是在網上搜集了部分gif格式動圖，將每一個Gif動圖分解為一組jpg格式圖片，再采用setInterval與html5 Canvas進行動畫的實現。通過學習可以讓學生進一步了解canvas動畫實現的過程與原理。并將其發布到頭條，也希望對有興趣的初學者了解HTML5 Canvas等有所幫助。圖片分組圖片素材如下：
素材一
實現動畫的素材我們已經給出，主要通過gif動圖導出一組圖片，下面對html5動畫實現過程進行簡單說明。
實現其動畫的基本思路是通過HTML5提供的canvas元素進行圖片的繪制與展示，借助setInterval方法實現間隔指定時間調用新的圖片實現重新繪圖。其中繪圖主要使用drawImage方法進行繪圖，最終通過圖片依次重繪實現動畫效果。具體實現過程如下：
在頁面body部分添加Canva標簽，設置其id屬性為canv，寬度為600，高度為400,編寫代碼描述如下圖：
添加畫布元素
canvas瀏覽效果
使用Canvas借助JavaScript提供的drawImage方法進行繪圖，需要提供要繪制的圖片資源即繪圖的坐標位置。該方法原型如下：
drawImage方法原型
因此我們需要加載圖片資源，本例由于需要調用多個img實現定時不同圖片的繪制，因此我們可以使用數組存儲所加載的圖片資源。本例圖片數量為14，因此我們數組長度為14。使用素組存儲圖片實現代碼如下：
加載圖片資源代碼
本例設計在頁面加載時自動播放動畫，因此需要在JavaScript腳本中添加頁面onload事件，在事件中編寫繪圖相關代碼，主要代碼包括獲取畫布canva與實例化繪圖對象context。部分代碼描述如下：
onload事件及繪圖初始化
使用setInterval方法實現動畫主要需要定義回調函數與回調函數觸發執行的周期，本例中我們使用匿名函數作為回調函數，觸發周期設置為100毫秒。setInterval函數定義如下：
setInterval函數
在定義完函數之后可在其匿名函數函數體部分寫入繪圖方法dramImage(),實現周期調用不同圖片資源進行繪圖，最終展示出動畫效果。為了保證循環調用14張圖片，我們需要設置一計數全局變量i，由于我們圖片采用數組存儲，下標為數組，且從0-13進行編號，因此當計數值小于13時自動+1，指向下一數組下標，當為13時，設置計數值為0，回到數組第一元素，最終實現數組訪問下標的循環。setInterval實現完整代碼如下：
setInterval完整代碼
HTML動畫效果展示
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。期待大家關注！如需案例完整代碼請關注并私信，往期前端設計文章鏈接如下：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
