canvas繪製圖形

時間 2019-12-12

標籤 canvas 繪製圖形简体版

原文原文鏈接

第一步：html5頁面中添加canvas元素javascript

<canvas id="myCanvas" width="300" height="300"></canvas>

一、javascript繪製圖形(矩形)css

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");     //獲取容許繪製圖像的2D環境
cxt.fillStyle="#FF0000";        //fillStyle爲繪製的圖像填充顏色
cxt.fillRect(0,0,150,75);       //fillRect繪製矩形，前兩個座標爲x，y軸，後面爲寬高
</script>

除了能夠使用fillStyle和fillRect，還能夠使用strokeStyle和strokeRect，fill是填充，而stroke是輪廓，全部用strokeStyle和strokeRect是繪製的矩形輪廓，而fillStyle與fillRect繪製的是實體矩形。html

二、繪製直線（使用 moveTo、lineTo、stroke方法）html5

moveTo(x,y)：用於創建新的子路徑，規定起始點爲 (x,y)java

lineTo(x,y)：用於從moveTo方法規定的起始點開始繪製一條到規定座標的直線。canvas

stroke()：用於沿着該路徑繪製一條直接。spa

<script type="text/javascript">
window.onload = function(){
    var c = document.getElementById('myCanvas');
    var content = c.getContext('2d');
    
    content.moveTo(0,0);
    content.lineTo(300,300);
    content.stroke();
};
</script>

三、繪製圓形（用到beginPath、arc、closePath、fill這四個方法）code

beginPath()：用於開始繪製路徑htm

closePath()：用於將圖形閉合起來blog

arc(x,y,radius,startAngle,endAngle,anticlockwise)：用於繪製圓形，x,y爲座標，radius爲半徑，startAngle爲開始的角度，endAngle爲結束的半徑，anticlockwise爲是否按順時針方向繪製圖形。

<script type="text/javascript">
window.onload = function(){
    var c = document.getElementById('myCanvas');
    var content = c.getContext('2d');
    
    content.fillStyle="#FA7E2A";
    content.beginPath();
    content.arc(50,50,50,0,Math.PI*2,true);
    content.closePath();
    content.fill();
};
</script>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
body{background: #1b1b1b;}
#div1{margin:50px auto; width:300px; height: 300px;}
canvas{background: #fff;}
</style>
<script type="text/javascript">
window.onload = function(){
    var c = document.getElementById('myCanvas');
    var content = c.getContext('2d');
    
    for(var i=0; i<=15; i++){
        content.fillStyle = '#FA7E2A';
        content.beginPath();
        content.arc(0,150,i*10,0,Math.PI*3/2,true);
        //content.closePath();
        content.stroke();
    }
    
};
</script>
</head>
<body>
    <div id="div1">
        <canvas id="myCanvas" width="300" height="150"></canvas>
    </div>
</body>
</html>

四、繪製三角形

清除：clearRect(x,y,width,height); x,y爲座標

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
#div1{margin:50px auto; width:300px; height: 300px;}
canvas{border:1px solid #000;}
</style>
<script type="text/javascript">
window.onload = function(){
    var c = document.getElementById('myCanvas');
    var content = c.getContext('2d');
    
    content.fillStyle = '#FA7E2A';
    content.beginPath();
    content.moveTo(25,25);
    content.lineTo(150,25);
    content.lineTo(25,150);
    content.closePath();
    content.fill();
    
    document.getElementsByTagName('input')[0].onclick = function(){
        content.clearRect(0,0,300,300);
    };
};
</script>
</head>
<body>
    <div id="div1">
        <canvas id="myCanvas" width="300" height="300"></canvas>
        <input type="button" value="清除畫布" />
    </div>
</body>
</html>

相關標籤/搜索

每日一句

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