Canvas畫布的一些實用技巧

原創

2018-08-24 23:59

Canvas 畫布，可能對於大多數人都有點陌生，不過，這個真得是一個酷炫的東西，你真的值得擁有，這是我這兩天用它的時候產生的一種想法~

這篇文章主要介紹的在Canvas中圖片展示。

有沒有想到一種場景，關於圖片展示的，就像某寶的商品詳情頁，當鼠標在圖片上移動的時候，在旁邊的一個區域出現圖片的部分區域放大圖。

而實現這個的函數就是 drawImage（params_0 --- params_8)

他的參數最多有九個，最少有三個，具體用法自查，比較簡單，介紹下9個參數時候具體的參數。

dramImage（image,src_X,src_Y,src_width,src_height,des_X,des_Y,des_width,des_height）

image是一個image對象，使用new Image(),創建的對象，需要制定該對象的src，就是你要處理的圖片。

src_X,src_Y 對應的是你image.src指向的圖像上的座標，圖像的左上角座標是（0,0），這兩個參數就是相對於原點的座標。

src_width,src_height是你從你相對原點的位置取得一塊區域。

後面那四個參數你可以類比，哦，對了，des_X,des_Y是相對Canvas原點的位置。

然後你就可以開始YY了，其實超簡單的，只是你沒過度過來。^_^

監聽鼠標的事件知道吧，用mousemove監聽鼠標在對象上的對應位置（相對位置是算出來的，你可以去瞅瞅怎麼算，挺簡單的）

然後每次把畫布clean了，重畫，可以用clearRect這個方法來搞。

大致就介紹到這，你要是有點編程能力或者頭腦，應該差不多能搞定吧。

對了 drawImage和clearRect都是基於canvas的繪圖環境的：eg: var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");//基於context的

還是附上代碼吧：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Canvas</title>
<style type="text/css" media="screen">
.mycanvas{
display: block;
margin: 0 auto ;
border:1px solid #aaa;
cursor: pointer;
}
.box{
position: absolute;
top:600px;
left: 50%;
}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var image = new Image();
image.src = "img.png";
canvas.width = 500;
canvas.height = 500;
image.onload = function(){
context.drawImage(image,0,0,canvas.width,canvas.height);
// canvas.addEventListener('mouseover',getImageHandler,false);
canvas.addEventListener('mousemove',getImageHandler,false);
}
}
function getImageHandler(e){
var x = e.clientX;
var y = e.clientY;
console.log("x:"+x+" y:"+y);
var box = document.getElementById("box");
var boxcontext = box.getContext("2d");
boxcontext.width =200;
boxcontext.height = 200;
var image = new Image();
image.src = "img.png";
boxcontext.clearRect(0,0,0,0);
boxcontext.drawImage(image,x-e.target.offsetLeft,y-e.target.offsetTop,100,100,0,0,200,200);
}
</script>
</head>
<body>
<canvas id="canvas" class="mycanvas">
</canvas>
<canvas id="box" class="box">
</canvas>
</body>
</html>

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.