html5 canvas 畫布畫圓

時間 2019-11-08

標籤 html5 html canvas 畫布畫圓欄目 HTML5 简体版

原文原文鏈接

什麼是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。javascript

畫布是一個矩形區域，您能夠控制其每一像素。css

canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。html

瀏覽器支持

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <canvas> 標籤。java

ps:Internet Explorer 8 以及更早的版本不支持 <canvas> 標籤。canvas

理解座標

在canvas中，畫布的 X 和 Y 座標用於在畫布上對繪畫進行定位，畫布的左上角爲座標原點（0,0）。api

在canvas中的座標以下：瀏覽器

在Canvas中用來繪製圓形的javascript api函數爲arc(x,y,radius,startAngle,endAngle,antiClockwise(Boolean));函數

參數說明:ui

x，y是圓心的座標，htm

radius是圓的半徑，

startAngle 圓的起始角度，

endAngle圓的結束角度，

antiClockwise 圓繪製的順序,默認爲順時針，爲true時是逆時針，這只是是內部繪製的順序不同而已,顯示的效果是同樣的.

如繪製一個完整的圓形時:canvas.arc(50,50,25,0,2*Math.PI);

咱們能夠根據某個值來動態繪製圓弧的長度,只要把圓的結束角度設置爲動態的便可。如根據某個百分比數據來繪製一個統計某個數據的圓弧,假設是滿意度爲50%，那麼圓的結束角度爲0.5*2*Math.PI.這樣既可畫出一個半圓了。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>canvas繪製圓形</title><style type="text/css">*{margin:0; padding:0;}#canvas-box{width:980px; margin:50px auto;}#percent{color:#C00;}#canvas{border:1px solid #900; margin:0 auto 0 auto;}</style></head><body><div id='canvas-box'> <p></p><b id="percent">50</b>%</p> <canvas id="canvas" width="400" height="400" ></canvas></div><script type="text/javascript"> var p=document.getElementById('percent').innerHTML; p=p/100; var canvas=document.getElementById('canvas').getContext('2d'); canvas.beginPath(); canvas.arc(200,200,100,0,2*Math.PI); canvas.strokeStyle='#f00'; canvas.lineWidth=2; canvas.stroke(); canvas.closePath(); canvas.beginPath(); canvas.arc(50,50,50,0,p*2*Math.PI); canvas.strokeStyle='#00f'; canvas.lineWidth=2; canvas.stroke(); canvas.closePath();</script></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。