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小時內與您取得聯系。