用html5的canvas和JavaScript創(chuàng)建一個繪圖程序的簡單實(shí)例

本文將引導(dǎo)你使用canvas和JavaScript創(chuàng)建一個簡單的繪圖程序。
首先準(zhǔn)備容器Canvas元素,接下來所有的事情都會在JavaScript里面。
- <canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>
獲取繪圖環(huán)境,context對象提供了用于在畫布上繪圖的方法和屬性
- context = document.getElementById('canvasInAPerfectWorld').getContext("2d");
開始繪圖過程
首先我們需要存儲繪圖路徑點(diǎn)坐標(biāo),addClick函數(shù)添加坐標(biāo)點(diǎn)值到數(shù)組
- var clickX = new Array();
- var clickY = new Array();
- var clickDrag = new Array();//存儲路徑點(diǎn)
- var paint;//是否繪制,mousedown時置為true
- function addClick(x, y, dragging)
- {
- clickX.push(x);
- clickY.push(y);
- clickDrag.push(dragging);
- }
redraw函數(shù)每次調(diào)用整個canvas就會重新繪制一次。首先我們清空畫布上內(nèi)容,設(shè)置繪制線條顏色粗細(xì)線條連接方式。然后
兩點(diǎn)之間繪制一段路徑,將數(shù)組中的坐標(biāo)點(diǎn)依次繪制出來
- function redraw(){
- context.clearRect(0, 0, context.canvas.width, context.canvas.height); // 清除畫布內(nèi)容
- context.strokeStyle = "#df4b26";//設(shè)置線條顏色
- context.lineJoin = "round";//當(dāng)兩條線條交匯時,創(chuàng)建圓形邊角
- context.lineWidth = 5;//線條粗細(xì)
- for(var i=0; i < clickX.length; i++) {
- context.beginPath();//開始一條路徑,或重置當(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();//繪制路徑
- }
- }
繪制過程需要的事件
1 mousedown事件
繪圖這點(diǎn)擊到畫布上時,將觸發(fā)該事件執(zhí)行。調(diào)用了addClick函數(shù),并將paint置為true。
- $('#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)移動時觸發(fā)mousemove事件執(zhí)行,將鼠標(biāo)移動的所有點(diǎn)記錄下來,并不斷調(diào)用redraw重繪畫布。
- $('#canvas').mousemove(function(e){
- if(paint){
- addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
- redraw();
- }
- });
3 mouseup事件
mouseup鼠標(biāo)點(diǎn)擊后松開或者拖拽后松開,表示繪制完成該路徑,將paint置為false。
- $('#canvas').mouseup(function(e){
- paint = false;
- });
4 mouseleave事件
mouseleave鼠標(biāo)離開canvas元素,將paint置為false。
- $('#canvas').mouseleave(function(e){
- paint = false;
- });
以上這篇用html5的canvas和JavaScript創(chuàng)建一個繪圖程序的簡單實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
原文地址:http://www.cnblogs.com/fangsmile/archive/2016/07/05/5644611.html
相關(guān)文章
- 本篇文章主要介紹了html5使用Canvas繪圖的使用方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-21
詳解html5 canvas常用api總結(jié)(二)--繪圖API
本篇文章主要介紹了html5 canvas常用api總結(jié)(二)--繪圖API ,canvas可以繪制出很多奇妙的樣式和美麗的效果,通過幾個簡單的api就可以在畫布上呈現(xiàn)出千變?nèi)f化的效果,還可以2016-12-14- 在html5中我覺得最重要的就是引入了Canvas,使得我們可以在web中繪制各種圖形,而Canvas為基于像素的繪圖。Canvas是一個相當(dāng)于畫板的html節(jié)點(diǎn),我們必須以js操作繪圖2012-12-26
- 這篇文章主要介紹了詳解HTML5 canvas繪圖基本使用方法的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-29