前幾天小編有事,所以頭條一直沒有更, 所以今天補下
這次用的是h5裡面的畫布就是canvas進行的繪製,這個也是考驗的js能力
話不多說了 下面開始介紹幾個需要用到的知識
首先是關於座標的只是
關於座標點的
從0,0,開始如果是向左 那麼x軸改變座標大小,y軸則保持不變
從0,0開始如果是向下,那麼y軸改變左邊哦大小,x軸保持不變
下面是幾個方法
xx.moveTo(x,y)//線條開始
xx.lineTo(x,y)//線條結束
xx.beginPath//變成單獨的一個區域開始
xx.closePath//結束如果設置了等於結束這個畫布
xx.lineWidth//線條的寬度
xx.stroKeStyle//線條的顏色
xx.fillStyle//背景色
xx.stroke//繪製線條
xx.fill//繪製背景色
以上這些方法是基本的繪製方法
首先看下html佈局
<div class="aa">
<canvas id="canvas"></canvas>
</div>
css樣式
<style>
.aa{margin: 0 auto;width: 960px;}
</style>
最後看下js的代碼
可能有的同學想到了 不就7個圖形嗎,來上7個區域,用鼠標事件挨個獲取座標,然後畫出7個圖形
這樣是可以,但是太笨了。
所以首先 我們可以把這些都放到一個數組裡面到時候遍歷就翻遍很多了
var tangram=[
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'#67becf'},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'#ef3d61'},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9f51a'},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ecc'},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'}
]
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
獲取下id 定義畫布的大小
var ConText=canvas.getContext('2d');
for(var i=0;i<tangram.length;i++){
draw(tangram[i],ConText);
}
循環整個數組,都存到方法裡
function draw(pie,cont){
cont.beginPath();
cont.moveTo(pie.p[0].x,pie.p[0].y);
for(var i=0;i<pie.p.length;i++){
cont.lineTo(pie.p[i].x,pie.p[i].y);
}
draw方法有兩個參數分別對應上面for循環裡面的,循環裡面的第i個
cont.closePath();
cont.fillStyle= pie.color;
cont.fill();
cont.lineWidth=3;
cont.strokeStyle='black';
cont.stroke();
上面的都懂什麼意思了 就不說了
看下完成後的圖
七巧板
下面是完整的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.aa{margin: 0 auto;width: 960px;}
</style>
</head>
<body>
<div>
<canvas id="canvas"></canvas>
</div>
<script>
var tangram=[
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'#67becf'},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'#ef3d61'},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9f51a'},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ecc'},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'}
]
window.onload= function () {
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var ConText=canvas.getContext('2d');
for(var i=0;i<tangram.length;i++){
draw(tangram[i],ConText);
}
function draw(pie,cont){
cont.beginPath();
cont.moveTo(pie.p[0].x,pie.p[0].y);
for(var i=0;i<pie.p.length;i++){
cont.lineTo(pie.p[i].x,pie.p[i].y);
}
cont.closePath();
cont.fillStyle= pie.color;
cont.fill();
cont.lineWidth=3;
cont.strokeStyle='black';
cont.stroke();
}
}
</script>
</body>
</html>