html5的Canvas技術實現簡易繪畫板

例說說用html5的Canvas技術實現簡易繪畫板

以往也用canvas劃過繪畫布局，今次在原來的基礎上加上一些能選擇的功能，比如筆頭的大小、繪畫的形狀、繪畫的線條、清除按鈕等！

功能還不是很完善，如有不恰當或有問題之處，歡迎給予斧正，感謝支持！

下面看看效果圖：

實現代碼

html結構：

css樣式：

javascript代碼：

TML5中的一個新增元素——元素以及伴隨這個元素而來的一套編程接口——canvas API。使用canvas API可以在頁面上繪制出任何你想要的、非常漂亮的圖形與圖像，創造出更加豐富多彩、賞心悅目的Web頁面。

canvas的概念最初是由蘋果公司提出的，用于在Mac OS X WebKit中創建控制板部件（Dashboard Widget）。在canvas出現之前，開發人員若要在瀏覽器中使用繪圖API，只能使用Adobe的Flash和SVG（可伸縮矢量圖形）插件，或者只有IE才支持的VML（矢量標記語言），以及JavaScript中的一些技術。假設我們要在沒有canvas元素的條件下繪制一條對角線，此時如果沒有一套二維繪圖API的話，這會是一項相當復雜的工作。HTML5中的canvas就能夠提供這樣的功能，對瀏覽器端來說這個功能非常有用，因此canvas被納入了HTML5規范。

在canvas元素里進行繪畫，并不是指拿鼠標來作畫。在網頁上使用canvas元素時，它會創建一塊矩形區域。默認情況下該矩形區域寬為300像素，高為150像素，用戶可以自定義具體的大小或者設置canvas元素的其他特性。在頁面中加入了canvas元素后，我們便可以通過JavaScript來自由地控制它。可以在其中添加圖片、線條以及文字，也可以在里面繪圖，甚至還可以加入高級動畫。

【前端開發】最新前端入門教程，html css基礎教程+移動端前端視頻教程。_嗶哩嗶哩_bilibili

篇文章給大家帶來的內容是關于Canvas繪制出時鐘的代碼示例，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

完整代碼：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

div {

text-align: center;

margin-top: 250px;

}

</style>

</head>

<body>

<div>

<canvas id="clock" height="200px" width="200px">你的瀏覽器不支持canvas</canvas>

</div>

var dom=document.getElementById('clock');

var ctx=dom.getContext('2d');

var width=ctx.canvas.width;

var height=ctx.canvas.height;

var r=width / 2;

//繪制表盤

function drawBackground() {

ctx.save();

ctx.translate(r, r);

ctx.beginPath();

ctx.lineWidth=10;

ctx.arc(0, 0, r - 5, 0, 2 * Math.PI, false);

ctx.stroke();

var hourNumbers=[3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

ctx.font='18px Arial';

ctx.textAlign='center';

ctx.textBaseline='middle';

//小時數字

hourNumbers.forEach(function (number, i) {

var rad=2 * Math.PI / 12 * i;

var x=Math.cos(rad) * (r - 30);

var y=Math.sin(rad) * (r - 30);

ctx.fillText(number, x, y);

// console.log(x)

})

//繪制分刻度

for (var i=0; i < 60; i++) {

var rad=2 * Math.PI / 60 * i;

var x=Math.cos(rad) * (r - 18);

var y=Math.sin(rad) * (r - 18);

ctx.beginPath();

if (i % 5==0) {

ctx.fillStyle='#000';

ctx.arc(x, y, 2, 0, 2 * Math.PI, false);

} else {

ctx.fillStyle='#ccc';

ctx.arc(x, y, 2, 0, 2 * Math.PI, false);

}

ctx.fill();

}

//繪制時針

function drawHour(hour, minute) {

ctx.save();

ctx.beginPath();

var rad=2 * Math.PI / 12 * hour;

var mrad=2 * Math.PI / 12 / 60 * minute;

ctx.rotate(rad + mrad);

ctx.lineWidth=6;

ctx.lineCap='round';

ctx.moveTo(0, 10);

ctx.lineTo(0, -r / 2);

ctx.stroke();

ctx.restore();

}

//繪制分針

function drawMinute(minute) {

ctx.save();

ctx.beginPath();

var rad=2 * Math.PI / 60 * minute;

ctx.rotate(rad);

ctx.lineWidth=3;

ctx.lineCap='round';

ctx.moveTo(0, 10);

ctx.lineTo(0, -r + 30);

ctx.stroke();

ctx.restore();

}

//繪制秒針

function drawSecond(second) {

ctx.save();

ctx.beginPath();

ctx.fillStyle='red'

var rad=2 * Math.PI / 60 * second;

ctx.rotate(rad);

ctx.moveTo(-2, 20);

ctx.lineTo(2, 20);

ctx.lineTo(1, -r + 18);

ctx.lineTo(-1, -r + 18);

ctx.fill();

ctx.restore();

}

//繪制指針的端點

function drawDot() {

ctx.beginPath();

ctx.fillStyle='white';

ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);

ctx.fill();

}

//動起來

function draw() {

//清除之前所繪制的

ctx.clearRect(0, 0, width, height);

var now=new Date();

var hour=now.getHours();

var minute=now.getMinutes();

var second=now.getSeconds();

drawBackground();

drawHour(hour, minute);

drawMinute(minute);

drawSecond(second)

drawDot();

ctx.restore();

}

//draw();

setInterval(draw, 1000);

</script>

</body>

</html>

以上就是Canvas繪制出時鐘的代碼示例的詳細內容，更多請關注其它相關文章！

更多技巧請《轉發 + 關注》哦！

在線咨詢

上一篇：CSS作圖（二），純CSS代碼畫出精致逼真的圖像，學
下一篇：用sendRedirect跳轉

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html5的Canvas技術實現簡易繪畫板

您的項目需求