canvas入門（繪制篇）
阿新 • • 發佈：2017-07-27
ava 入門 draw itl close javascrip path res doctype
什麽是canvas？
canvas即畫布，HTML5的canvas元素可以在其矩形區域繪制圖像。
創建canvas，通過js創建context對象
<canvas id="canvas" width="500" height="300"></canvas>
<script type="text/javascript">
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
</script>
ps： 畫布的寬度和高度只能通過標簽屬性設置，如果使用style控制畫布會被拉伸
畫布的坐標
x為500，y為300. 分別對應寬和高
繪制線條
<script type="text/javascript">
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
cxt.moveTo(250,150); //線條起點
cxt.lineWidth=10; //線條寬度
cxt.lineCap="round"; //線條端點樣式 round,square
cxt.lineTo(500,300); //線條終點
cxt.strokeStyle="#ff0000"; //線條顏色
cxt.stroke(); //繪制
</script>
繪制矩形
<script type="text/javascript">
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke(); //等同於ctx.strokeRect(20,20,150,100);
ctx.rect(20,20,150,100);
ctx.fill(); //等同於ctx.fillRect(20,20,150,100);
</script>
rect( x , y , w , h) ;
x : 矩形左上角x坐標
y : 矩形左上角y坐標
w : 矩形寬度
h : 矩形高度
繪制圓弧
<script type="text/javascript">
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
</script>
arc(x,y,r,開始角,結束角,順時針繪圖false/逆時針回復true)
實例？？
前端小白今天看了一下畫布的基礎用法，先做了一個時鐘 . .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var r = width / 2;
var r2 = r * 0.85;
function draw(){
ctx.clearRect(0,0,width,height); //清空矩形區域的元素
//外圓
ctx.beginPath(); //起始路徑
ctx.arc(r, r, r - 5, 0, 2 * Math.PI, true);
ctx.lineWidth = 10;
ctx.strokeStyle = ‘green‘;
ctx.stroke();
ctx.closePath(); //閉合路徑
//內圓
ctx.beginPath();
ctx.arc(r, r, r2, 0, 2 * Math.PI, true);
ctx.lineWidth = 1;
ctx.strokeStyle = ‘#000‘;
ctx.stroke();
ctx.closePath();
//內圓點
var hour = [6, 5, 4, 3, 2, 1, 12, 11, 10, 9, 8, 7],
i = 0;
for (var deg = 0; deg < 360; deg = deg + 6) {
var spotX = r + r2 * Math.sin(deg * 2 * Math.PI / 360);
var spotY = r + r2 * Math.cos(deg * 2 * Math.PI / 360);
var spot = r * 0.02;
ctx.beginPath();
ctx.fillStyle = "#ccc";
if (deg % 30 == 0) {
ctx.fillStyle = "#000";
spot = r * 0.025;
var textX = r + (r2 * 0.85) * Math.sin(deg * 2 * Math.PI / 360);
var textY = r + (r2 * 0.85) * Math.cos(deg * 2 * Math.PI / 360);
ctx.font = r * 0.1 + "px Arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillText(hour[i], textX, textY);
i++;
}
ctx.arc(spotX, spotY, spot, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
}
//中心圓點
ctx.beginPath();
ctx.arc(r, r, r * 0.05, 0, 2 * Math.PI, true);
ctx.lineWidth = 1;
ctx.strokeStyle = ‘#000‘;
ctx.stroke();
ctx.closePath();
}
//時針
function drawHours(h,m){
ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.rotate(2*Math.PI/12*h+2*Math.PI/12/60*m);
ctx.strokeStyle = ‘#000‘;
ctx.lineWidth = 5;
ctx.lineCap = ‘round‘;
ctx.moveTo(0,r*0.4*0.2);
ctx.lineTo(0,-r*0.4);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
//分針
function drawMinute(m,s){
ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.rotate(2*Math.PI/60*m+2*Math.PI/60/60*s);
ctx.strokeStyle = ‘#000‘;
ctx.lineWidth = 2;
ctx.lineCap = ‘round‘;
ctx.moveTo(0,r*0.6*0.2);
ctx.lineTo(0,-r*0.6);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
//秒針
function drawSecond(s){
ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.rotate(2*Math.PI/60*s);
ctx.strokeStyle = ‘#f00‘;
ctx.lineWidth = 1;
ctx.lineCap = ‘round‘;
ctx.moveTo(0,r*0.8*0.2);
ctx.lineTo(0,-r*0.8);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
setInterval(function(){
var now = new Date();
h = now.getHours();
m = now.getMinutes();
s = now.getSeconds();
draw();
drawHours(h,m);
drawMinute(m,s);
drawSecond(s);
},1000);
</script>
</body>
</html>
參考文檔： http://www.w3school.com.cn/html5/html_5_canvas.asp
canvas入門（繪制篇）