本文將引導(dǎo)你使用canvas和JavaScript創(chuàng)建一個(gè)簡(jiǎn)單的繪圖程序。
首先準(zhǔn)備容器Canvas元素，接下來(lái)所有的事情都會(huì)在JavaScript里面。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>
獲取繪圖環(huán)境，context對(duì)象提供了用于在畫(huà)布上繪圖的方法和屬性
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- context = document.getElementById('canvasInAPerfectWorld').getContext("2d");
開(kāi)始繪圖過(guò)程
首先我們需要存儲(chǔ)繪圖路徑點(diǎn)坐標(biāo)，addClick函數(shù)添加坐標(biāo)點(diǎn)值到數(shù)組
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var clickX = new Array();
- var clickY = new Array();
- var clickDrag = new Array();
- var paint;
- function addClick(x, y, dragging)
- {
- clickX.push(x);
- clickY.push(y);
- clickDrag.push(dragging);
- }
redraw函數(shù)每次調(diào)用整個(gè)canvas就會(huì)重新繪制一次。首先我們清空畫(huà)布上內(nèi)容，設(shè)置繪制線條顏色粗細(xì)線條連接方式。然后
兩點(diǎn)之間繪制一段路徑，將數(shù)組中的坐標(biāo)點(diǎn)依次繪制出來(lái)
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- function redraw(){
- context.clearRect(0, 0, context.canvas.width, context.canvas.height); // 清除畫(huà)布內(nèi)容
-
- context.strokeStyle = "#df4b26";//設(shè)置線條顏色
- context.lineJoin = "round";//當(dāng)兩條線條交匯時(shí)，創(chuàng)建圓形邊角
- context.lineWidth = 5;//線條粗細(xì)
-
- for(var i=0; i < clickX.length; i++) {
- context.beginPath();//開(kāi)始一條路徑，或重置當(dāng)前的路徑
- if(clickDrag[i] && i){
- context.moveTo(clickX[i-1], clickY[i-1]);
- }else{
- context.moveTo(clickX[i]-1, clickY[i]);
- }
- context.lineTo(clickX[i], clickY[i]);
- context.closePath();
- context.stroke();//繪制路徑
- }
- }
繪制過(guò)程需要的事件
1 mousedown事件
繪圖這點(diǎn)擊到畫(huà)布上時(shí)，將觸發(fā)該事件執(zhí)行。調(diào)用了addClick函數(shù)，并將paint置為true。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- $('#canvas').mousedown(function(e){
- var mouseX = e.pageX - this.offsetLeft;
- var mouseY = e.pageY - this.offsetTop;
- paint = true;
- addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
- redraw();
- });
2 mousemove事件
mousedown中設(shè)置的paint為true后，鼠標(biāo)移動(dòng)時(shí)觸發(fā)mousemove事件執(zhí)行，將鼠標(biāo)移動(dòng)的所有點(diǎn)記錄下來(lái)，并不斷調(diào)用redraw重繪畫(huà)布。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- $('#canvas').mousemove(function(e){
- if(paint){
- addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
- redraw();
- }
- });
3 mouseup事件
mouseup鼠標(biāo)點(diǎn)擊后松開(kāi)或者拖拽后松開(kāi)，表示繪制完成該路徑，將paint置為false。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- $('#canvas').mouseup(function(e){
- paint = false;
- });
4 mouseleave事件
mouseleave鼠標(biāo)離開(kāi)canvas元素，將paint置為false。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- $('#canvas').mouseleave(function(e){
- paint = false;
- });
以上這篇用html5的canvas和JavaScript創(chuàng)建一個(gè)繪圖程序的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
原文地址：http://www.cnblogs.com/fangsmile/archive/2016/07/05/5644611.html
