html5扇形,html5扇形探測雷達(dá)
html5怎么把一個div做成扇形 求大神指點(diǎn)~
!doctype?html
創(chuàng)新互聯(lián)公司是一家專業(yè)提供湟源企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、做網(wǎng)站、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為湟源眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。
html?lang="zh"
head
meta?charset="UTF-8"
title效果實現(xiàn)/title
style
*{margin:?0;padding:?0;}
div{width:?0px;height:?0px;border-radius:?50px;border:50px?solid?transparent;border-top-color:red;}
/style
/head
body
div/div
/body
/html
html5canvas怎么改變扇形起始角的位置
在HTML5 Canvas 中，我們可以通過 arc 方法來繪制圓形：
// context.arc(x, y, r, sAngle, eAngle, counterclockwise);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();
但如何繪制一個扇形呢？是不是簡單地修改結(jié)束角度 2 * Math.PI 就可以了呢？
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, 1.5 * Math.PI);
ctx.fill();
然而，我們會看到一個不符合我們預(yù)期的圖形：
因為在 arc 方法是用來創(chuàng)建一條弧線的，而如果直接將弧線的起點(diǎn)和終點(diǎn)閉合，再進(jìn)行填充，自然繪制出的是上面的圖形了。
知道了原因，要解決就很簡單了，只要讓這條弧線與圓心進(jìn)行閉合，就剛好形成了一個扇形：
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 開始一條新路徑
ctx.beginPath();
// 位移到圓心，方便繪制
ctx.translate(100, 100);
// 移動到圓心
ctx.moveTo(0, 0);
// 繪制圓弧
ctx.arc(0, 0, 50, 0, Math.PI * 1.5);
// 閉合路徑
ctx.closePath();
ctx.fill();
這里的重點(diǎn)在于 moveTo 和 closePath ，將路徑的起點(diǎn)設(shè)置在圓心，而最后閉合路徑，正好就成為了一個扇形。
代碼也可以抽取為通用的方法，如下：
CanvasRenderingContext2D.prototype.sector = function(x, y, radius, sAngle, eAngle, counterclockwise) {
this.beginPath();
this.translate(x, y);
this.moveTo(0, 0);
this.arc(0, 0, radius, sAngle, eAngle, counterclockwise);
this.closePath();
return this;
};
HTML5 里面我在畫一個圓形，里面的cxt.arc(70,18,15,0,Math.PI*2,true)；
cxt.arc(100,100,30,0,Math.PI*2,true); 括號內(nèi)第一個和第二個參數(shù)，代表圓心坐標(biāo)。第三個參數(shù)是圓的半徑。第四個參數(shù)代表圓周起始位置。0 PI就是起始位置。沿順時針路線，分別是0.5 PI（正下方），1 PI和1.5 PI（正上方），為畫餅圖提供了扇形范圍的依據(jù)。 第五個參數(shù)是弧長Math.PI*2就是整個圓，Math.PI是半圓。第六個參數(shù)是一個布爾值，true是順時針false是順時針。
3，html5 canvas 元素有什么用
html5 canvas 元素的作用就是描繪出圖形，比如畫圓，扇形，折線圖等，有了這個，這些功能都是很好實現(xiàn)的。
html5 canvas繪圖有什么用
canvas能做什么?
canvas是HTML5中的新元素，你可以使用javascript用它來繪制圖形、圖標(biāo)、以及其它任何視覺性圖像。它也可用于創(chuàng)建圖片特效和動畫。如果你掌握了完整的命令，你可以用canvas創(chuàng)建豐富的web應(yīng)用程序。如果你想很好的使用canvas，你首先應(yīng)該很好的掌握javascript。
這篇文章是一篇基礎(chǔ)教程，你能了解一些設(shè)計方法。比如用HTML5 canvas 進(jìn)行圖形設(shè)計。
用HTML5 canvas設(shè)計
設(shè)計和開發(fā)一個web頁面會包含很多的內(nèi)容，用戶首先需要有一個支持HTML canvas的瀏覽器。
首先創(chuàng)建一個HTML5文檔頁面，設(shè)置document type是HTMl5的；
其次在頁面body區(qū)域添加一個canvas標(biāo)簽：
canvas/canvas
第三、給這個canvas定義一個id屬性，這樣方便我們在js中調(diào)用它。添加一個寬和高屬性，在canvas標(biāo)簽中添加一個當(dāng)瀏覽器不支持的時候顯示給用戶的內(nèi)容。下面是列子代碼：
canvas id="canvastest" width="500" height="600"
p你的瀏覽器不支持HTML5 canvas,請更新您的瀏覽器！/p
/canvas
現(xiàn)在我們創(chuàng)建了一個包含HTML5 canvas 元素的空白畫布，我們將使用js和canvas元素的方法來創(chuàng)建我們的圖像。
添加一個javascript用HTMl5 canvas的方法：
var canvasTest=document.getElementById('canvastest');//獲取canvas元素；
var testcontext=canvasTest.getContext('2d');
使用javascript來創(chuàng)建你的畫布，你可以使用矩形、圓圈和三角形,并使用線、幻燈片和漸變來創(chuàng)建你的設(shè)計。
下面是完成的代碼：
var canvasTest=document.getElementById('canvastest');
var testcontext=canvasTest.getContext('2d');
// create rectangle
testcontext.fillStyle='rgb(0,125,125)';
testcontext.fillRect(10,10,250,180);
// create circle
testcontext.beginPath();
testcontext.arc(300, 340, 100, 0, Math.PI * 2, true);
testcontext.closePath();
testcontext.fillStyle='rgb(75,10,125)';
testcontext.fill();
testcontext.stroke();
我們可以將上面的代碼加入window.onload，或者jQuery的ready方法里，當(dāng)文檔加載完，將會創(chuàng)建文明的圖形。
一些HTML5 canvas 圖像解決方案
用與HTML5 Canvas元素你可以開發(fā)動態(tài)繪圖對象比如如可視化信息或數(shù)據(jù)圖。HTML5 canvas 可以在javascript的幫助下很容易的繪制二維圖形。讓我們來看一下HTML5 canvas元素的一些數(shù)據(jù)圖應(yīng)用。
1. HumbleFinance
HumbleFinance是用js開發(fā)的一個開源的數(shù)據(jù)可視化圖表，它用HTML5 canvas生成可視化圖表數(shù)據(jù)，它可以用一個軸來展示任何兩個二維的數(shù)據(jù)集。
地址：
2.Graphr
Graphr是一個用HTML5 canvas寫的一個計算器應(yīng)用，有每個圖像計算器應(yīng)有的基本功能。
地址：
3.用HTML5和jQuery創(chuàng)建的華麗的動畫餅圖
你可以用javascript和HTML5來創(chuàng)建一個交互式餅圖，有華麗的動畫效果。這在之前只能用flash來完成，現(xiàn)在也可以使用最新的HTML5技術(shù)了。
地址：
4. AwesomeJS
AwesomeJS 能夠讓你創(chuàng)建簡單有用的圖表，而僅需幾行代碼即可。這是一個基于HTML5和canvas的javascript庫。
地址：
5.Ticker Plot（股票圖）
Ticker Plot（股票圖）是每一個在工作是使用圖標(biāo)的web開發(fā)人員都必備的一個圖表工具。這是一個開源的項目，它使用HTML5 canvas在畫布上繪制圖形符號和鼠標(biāo)事件。Ticker Plot（股票圖）是專門為股票行情和技術(shù)分析設(shè)計的。
網(wǎng)頁題目：html5扇形,html5扇形探測雷達(dá)
標(biāo)題網(wǎng)址：http://m.jiaotiyi.com/article/dsgdoej.html