萌新HTML5中這種圓圈在代碼應(yīng)該在哪？里面的字在哪改

利用css的圓角邊框即可實現(xiàn)：

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、做網(wǎng)站、余慶網(wǎng)絡(luò)推廣、小程序設(shè)計、余慶網(wǎng)絡(luò)營銷、余慶企業(yè)策劃、余慶品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供余慶建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：chinadenli.net

div?style="width:100px;?height:100px;?text-align:center;?line-height:100px;?border:1px?solid?#fff;?border-radius:50%;?background-color:rgba(90,90,90,0.5);?color:#fff"000/div

html5怎么做背景 圓圈擴散效果

引用

script src="" type="text/javascript"

/script

script language="javascript" type="text/javascript"

$(function() {

$('div.circle').mouseover(function() {

$('div.outer').addClass('hover');

$('div.middle').addClass('hover');

});

$('div.circle').mouseout(function() {

$('div.outer').removeClass('hover');

$('div.middle').removeClass('hover');

});

});

/script

做出之后的效果圖：

HTML5用哪個方法繪制

canvas繪圖通過屬于 canvas 的 JavaScript 方法完成

針對不支持html5的IE瀏覽器

!--[if IE]

script type="text/javascript" src="excanvas.js"/script

![endif]--

提示：canvas的繪圖過程（即填充與描邊）是非常消耗資源的，如果想節(jié)省系統(tǒng)資源提高效率，最好是繪制好所有路徑，再一次性填充或描邊圖形。

canvas 方法

方法

用途

getContext(contextId) ? ?公開在 canvas 上繪圖需要的 API。惟一（當(dāng)前）可用的 contextID 是 2d。 ?

height ? ?設(shè)置 canvas 的高度。默認值是 150 像素。 ?

width ? ?設(shè)置 canvas 的寬度。默認值是 300 像素。 ?

createLinearGradient(x1,y1,x2,y2) ? ?創(chuàng)建一個線性漸變。起始坐標(biāo)為 x1,y1，結(jié)束坐標(biāo)為 x2,y2。 ?

createRadialGradient(x1,y1,r1,x2,y2,r2) ? ?創(chuàng)建一個放射狀漸變。圓圈的起始坐標(biāo)是 x1,y1，半徑為 r1。圓圈的結(jié)束坐標(biāo)為 x2,y2，半徑為 r2。 ?

addColorStop(offset, color) ? ?向一個漸變添加一個顏色停止。顏色停止（color stop） 是漸變中顏色更改發(fā)生的位置。offset 必須介于 0 到 1 之間。 ?

fillStyle ? ?設(shè)置用于填充一個區(qū)域的顏色 — 例如，fillStyle='rgb(255,0,0)'. ?

strokeStyle ? ?設(shè)置用于繪制一根直線的顏色 — 例如，strokeStyle='rgb(255,0,0)'. ?

fillRect(x,y,w,h) ? ?填充一個定位于 x 和 y，寬度和高度分別為 w 和 h 的矩形。 ?

strokeRect(x,y,w,h) ? ?繪制一個定位于 x 和 y，寬度和高度分別為 w 和 h 的矩形的輪廓。 ?

moveTo(x,y) ? ?將繪圖位置移動到坐標(biāo) x,y。 ?

lineTo(x,y) ? ?從繪圖方法結(jié)束的最后位置到 x,y 繪制一條直線。 ?

1、繪制矩形：用到fillRect

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"

var canvas=document.getElementById("myCanvas"); ? //canvas 元素被設(shè)置為一個 JavaScript 變量

var myContext=canvas.getContext("2d"); ?//將getContext 應(yīng)用到 canvas 元素 ? ?myContext.fillStyle="#ff0000"; ? ? ? ?//16進制設(shè)置填充顏色 ? ?myContext.fillRect(30,30,300,300); ? ? ? ? //定義大小 ? ?myContext.fillStyle='rgb(0,255,0)'; ?//rgb設(shè)置填充顏色 ? ?myContext.fillRect(60,60,300,300);

myContext.fillStyle='rgba(255,0,0,0.5)'; ?//rgb+透明度設(shè)置填充顏色 ?myContext.fillRect(90,90,300,300);/script/body/html

2、線性漸變，用到createLinearGradient

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas"); ? ?var myContext=myCanvas.getContext('2d'); ? ?var myGradient=myContext.createLinearGradient(30,30,300,300); ? //創(chuàng)建一個線性漸變 ? ?myGradient.addColorStop(0,"#ff0000"); ? ? ? //位置0和1之間，顏色值 ? ?myGradient.addColorStop(0.5,"#00FF00");

myGradient.addColorStop(1,"#ff00ff");

myContext.fillStyle=myGradient; ? ? ? ? ? ? //用線性漸變填充 ? ?myContext.fillRect(0,0,400,400);/script/body/html

3、放射性漸變，用到createRadialGradient

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"var myCanvas=document.getElementById('myCanvas'); ? ?var myContext=myCanvas.getContext('2d'); ? ?var myGradient=myContext.createRadialGradient(300,300,0,300,300,400); ?//6個參數(shù) ? ?myGradient.addColorStop("0","#ff0000");

myGradient.addColorStop("1","#00ff00");

myContext.fillStyle=myGradient;

myContext.fillRect(0,0,300,300);/script/body/html

4、繪制矩形，與填充的不同，這個是描邊效果

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas"); ? ?var myContext=myCanvas.getContext('2d');

myContext.strokeStyle="#ff0000"; ? ? ? ? ? ?//設(shè)置筆觸純色 ? ?myContext.strokeRect(0,0,100,100);/script/body/html

(當(dāng)寬度為1px時，很明顯的出現(xiàn)了模糊的現(xiàn)象，解決方法是數(shù)值都加上0.5，具體原因就自己百度下吧)

5、漸變筆觸

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas"); ? ?var myContext=myCanvas.getContext('2d'); ? ?var myGradient=myContext.createLinearGradient(0,0,100,0);

myGradient.addColorStop(0,"#ff0000");

myGradient.addColorStop(1,'#0000ff');

myContext.strokeStyle=myGradient; ? ? ? ? ? ?//設(shè)置漸變筆觸 ? ?myContext.lineWidth=5; ? ? ? ? ? ? ? ? ? ? ? ? //描邊寬度 ? ?myContext.strokeRect(0,0,100,100);/script/body/html

6、繪制圓，圓周長公式=2∏r

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas"); ? ?var myContext=myCanvas.getContext('2d');

myContext.beginPath(); ? ? ? ? ? ? ? ? ? ? ?//開始一個新的繪制路徑 ? ?myContext.arc(100,75,50,0,2*Math.PI); ? ? //以坐標(biāo)點(100,75)為圓心，起始角為0，繪制一個半徑為50px的圓形 ? ?myContext.stroke(); ? ? ? ? ? ? ? ? ? ? ? ? //按照指定的路徑繪制弧線/script/body/html

7、繪制圓形

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbodycanvas id="myCanvas" width="500" height="500" ?style="margin:100px 0 0 100px;"/canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas"); ? ?var myContext=myCanvas.getContext('2d');

myContext.arc(100,100,50,0,2*Math.PI);

myContext.fillStyle="#ff0000";

myContext.fill();/script/body/html

8、繪制直線

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbody style="padding:500px;"canvas id="myCanvas" width="500" height="500" /canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas"); ? ?var myContext=myCanvas.getContext('2d');

myContext.lineWidth=5;

myContext.moveTo(0,0); ? ? ?//從坐標(biāo)(0,0)到(200,0) ? ?myContext.lineTo(200,0);

myContext.stroke(); ? ? ? ? //繪制已定義的路徑/script/body/html

9、繪制曲線

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbody style="padding:500px;"canvas id="myCanvas" width="500" height="500" /canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas"); ? ?var myContext=myCanvas.getContext('2d');

myContext.moveTo(20,20);

myContext.quadraticCurveTo(20,100,200,20);

myContext.stroke();/script/body/html

分享名稱：html5圓圈,HTML5圓圈里面有個大于號怎么打出來
文章網(wǎng)址：http://chinadenli.net/article37/dsedjpj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、服務(wù)器托管、網(wǎng)站排名、網(wǎng)站內(nèi)鏈、網(wǎng)站制作、手機網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)