HTML之環(huán)形圖

Chart.js允許通過HTML5的canvas進(jìn)行圖表繪制。這里我們希望繪制一個環(huán)形圖，點擊圖上各segment時可以顯示自定義的圓形tooltip。Chart.js支持通過幾個變量添加tooltip，它提供一個tooltipTemplate但是卻不支持自定義tooltip的HTML！于是決定自行繪制tooltip手動添加上去。

創(chuàng)新互聯(lián)公司是工信部頒發(fā)資質(zhì)IDC服務(wù)器商，為用戶提供優(yōu)質(zhì)的珉田數(shù)據(jù)中心服務(wù)

html5中畫圓總是畫不圓呢？下面截圖是效果和代碼，求解。

canvas width="300px" height="300px;" id="can"/canvas

script type="text/javascript"

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

var paint = can.getContext("2d");

paint.fillStyle = "#FF0000";

paint.beginPath();

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

paint.closePath();

paint.fill();

/script

復(fù)制過去運行一下就知道了。

HTML5中，如何為圖片制作放大鏡效果？

制作圖片的放大效果我考慮到的方法是將原始圖片繪制到canvas上，然后在對canvas進(jìn)行局部裁剪最后對裁剪的部分進(jìn)行放大，這樣就可以實現(xiàn)放大鏡的效果。

這里我給出一個實現(xiàn)這個想法的示例。該示例實際上就是運用HTML5?canvas中對畫布進(jìn)行裁剪與保存畫布狀態(tài)的相關(guān)知識實現(xiàn)的。

上面是給出示例的效果圖。這是不是你想要的放大鏡效果呢？

下面我們來看下示例代碼：在這個示例中當(dāng)你點擊圖片時圖片就會出現(xiàn)上圖效果，再一次點擊時就變成原始圖片了。

!DOCTYPE html

html

head

meta charset="utf-8"

title放大鏡/title

!—HTML代碼設(shè)計：一個簡單的canvas元素--

/head

body

div id="result-stub" class="well hidden"

canvas id="canvas" width="345" height="345"

p你的瀏覽器不支持canvas元素/p

/canvas

/div

script

window.onload=function() {

//獲取canvas對象以及圖片對象

var

canvas = document.getElementById('canvas'),

img = new Image(),

context = null,

dataUrl = null,

//設(shè)置一個標(biāo)記，該標(biāo)記的作用是控制我們點擊canvas時放大鏡效果的消失和出現(xiàn)

isMagnified = false,

//init函數(shù)只要是在圖片加載時繪制出圖形

init = function() {

img.onload = function() {

//繪制原始圖片

context.drawImage(img, 0, 0);

//將圖片信息轉(zhuǎn)化為二進(jìn)制信息或者URL信息存儲在dataUrl中方便后面調(diào)用

dataUrl = canvas.toDataURL();

}

img.src = 'fist-pump-baby.jpg';

//設(shè)置標(biāo)記值

isMagnified = false;

},

//magnify函數(shù)的作用是繪制具有放大鏡效果的圖形

magnify = function() {

//保存當(dāng)前畫布的繪制狀態(tài)即畫布繪制原始圖片的狀態(tài)。方便我們在后面恢復(fù)到繪制原始圖片的狀態(tài)

context.save();

//因為放大鏡的圓圈和把手是通過canvas繪制的這里設(shè)置了一些繪制把手和圓圈的樣式屬性。

context.lineWidth = 10;//?線條寬度

context.shadowColor = '#000';//?陰影的顏色黑色

context.shadowBlur = 15;//?模糊級別為15

context.shadowOffsetX = 5;//?形狀與陰影的水平距離5

context.shadowOffsetY = 5;//?形狀與陰影的垂直距離5

//保存畫布當(dāng)前狀態(tài)即我們設(shè)置陰影屬性后的狀態(tài)方便后面使用

context.save();

//繪制出放大鏡把手的圖形

context.beginPath();

context.moveTo(230, 230);

context.lineCap = 'round';

context.lineWidth = 30;

context.lineTo(285, 285);

context.stroke();

//對圖片進(jìn)行裁剪，裁剪出的圖形是一個圓形。

context.beginPath();

context.arc(

150,

150,

115,

0,

Math.PI * 2,

true);

context.clip();

//創(chuàng)建一個新的Image對象，這個Image對象的圖片資源是前面存儲在dataUrl中的圖片資源。所以這個Image對象和之前初始化的Image對象是完全一樣的。

var magnified = new Image();

magnified.src = dataUrl;

//對Image對象進(jìn)行放大1.5倍，并進(jìn)行繪制。注意此時的畫布狀態(tài)時裁剪為一個圓形的狀態(tài)，所以這里繪制的也僅僅是圖片中的一個圓形區(qū)域。這里為了繪制出圖片中娃娃的臉設(shè)置了繪制的圖片有一定的偏移量。

context.scale(1.5, 1.5);

context.drawImage(img, -40, -40);

//調(diào)用restore()函數(shù)將畫布狀態(tài)恢復(fù)到繪制把放大鏡把手時的狀態(tài)，即具有陰影屬性

context.restore();

//繪制放大鏡的圓圈，即繪制剛剛我們裁剪出來圖片的邊框。這樣剛剛裁剪出來的圓形圖形就會正好處于放大鏡的圓圈中。

context.arc(

150,

150,

115,

0,

Math.PI * 2,

true);

context.stroke();

//重置畫布，將畫布恢復(fù)到繪制元素圖片的狀態(tài)，以方便繪制出放大效果后，再次點擊是繪制原始圖片。

context.restore()；

//設(shè)置標(biāo)記值，實現(xiàn)點擊后放大效果消失。

isMagnified = true;

};

//加載初始化代碼，即當(dāng)運行頁面時會在頁面繪制出一個原始圖像

init();

//監(jiān)聽畫布的點擊事件，當(dāng)點擊頁面的圖像時會根據(jù)標(biāo)記的值來進(jìn)行判斷是否對畫布進(jìn)行方大處理

$('canvas').click(function() {

if (isMagnified) {

init();//繪制原始圖像

}

else {

magnify();//繪制放大的圖像

}

});

}

/script

script src="jquery.js"/script

/body

/html

對于這些知識在一個叫秒秒學(xué)的教程網(wǎng)站上有相關(guān)的學(xué)習(xí)資料，有興趣的可以自己去看看，希望對你有幫助。

html5，js,css圓形統(tǒng)計圖如何制作

百度出了一個 Echart，你可以試試。

或者，百度搜索“js 圖表”

使用html5中的canvas畫1px的空心圓形出現(xiàn)模糊如何解決？

本身他是按像素的方式渲染，所以你就1px的空心圓形，太小了，邊緣會出現(xiàn)模糊，如果圓畫大一點情況就會消失?；蛘吣憧梢韵绕揭葡伦鴺?biāo)，讓你的中心坐標(biāo)點是整數(shù)，再試看看。

在html5中canvas標(biāo)簽繪制一個圓紅色標(biāo)記處的參數(shù)分別指的什么意思

cxt.arc(70,18,15,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是順時針.