使用Canvas製作畫圖工具
前 言
JRedu
canvas是HTML5中重要的元素之一,canvas元素使用JavaScript在網頁上繪製圖像,畫布是一個矩形區域,我們可以控制其每一個元素,並且canvas擁有多種的繪製路徑、矩形、圓形、字元以及新增影象的方法。 這一章我們使用canvas來做一個畫圖工具,並且支援下載圖片功能。
最終實現介面
最終實現介面如下,當然我這種手殘黨是畫不出來,手動@陳沖老師畫的:
畫圖工具實現的主要功能
1.畫筆顏色和粗細點選選取
2.橡皮擦
3.清除畫布
4.下載圖片
在實現主要功能之前,首先要放置canvas畫布,實現在規定區域內隨意畫圖的功能,實現的原理是獲取滑鼠點選之後的位置,利用滑鼠的點選、移動事件來實現繪畫。實現程式碼如下:
設定全域性變數
var canvas = document.getElementById('canvas'); var cvs = canvas.getContext('2d'); var drawing =false;
Html程式碼:
<canvas id="canvas" width="800px" height="600px" style="border: 1px solid red;"></canvas>
Js程式碼:
window.onload = function(){ var penWeight = 0; //畫筆粗細 var penColor = ''; //畫筆顏色 canvas.onmousedown = function(e){ /*找到滑鼠(畫筆)的座標*/ var start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft; var start_y = e.clientY - canvas.offsetTop + document.body.scrollTop; cvs.beginPath(); //開始本次繪畫 cvs.moveTo(start_x, start_y); //畫筆起始點 /*設定畫筆屬性*/ cvs.lineCap = 'round'; cvs.lineJoin="round"; cvs.strokeStyle = penColor; //畫筆顏色 cvs.lineWidth = penWeight; //畫筆粗細 canvas.onmousemove = function(e){ /*找到滑鼠(畫筆)的座標*/ var move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft; var move_y = e.clientY - canvas.offsetTop + document.body.scrollTop; cvs.lineTo(move_x, move_y); //根據滑鼠路徑繪畫 cvs.stroke(); //立即渲染 } canvas.onmouseup = function(e){ cvs.closePath(); //結束本次繪畫 canvas.onmousemove = null; canvas.onmouseup = null; } canvas.onmouseleave = function(){ cvs.closePath(); canvas.onmousemove = null; canvas.onmouseup = null; } } }
1畫筆顏色和粗細點選選取
這裡我分別從畫筆顏色和畫筆粗細中個選取一個作為例子來簡述以下如何實現:
從上邊的程式碼中可以瞭解到控制畫筆粗細和顏色的分別是penWeight和penColor,也就是說,我們可以通過修改這兩個變數從而實現改變畫筆屬性的功能,程式碼如下:
Html程式碼:
<input type="button" value="粗" class="bold btn" onclick="checkpen(10)" /> <input type="button" value="紅" class="red item" style="background-color: red;border: none;" onclick="changecolor('red')" />
Js程式碼:
function checkpen(width){ //設定筆的粗細 cvs.lineWidth = width; } function changecolor(pencolor){ //設定顏色 cvs.strokeStyle =pencolor; }
2橡皮擦
選中橡皮擦之後提示正在使用,利用滑鼠移動,點選事件實現橡皮擦的功能,其中cvs.globalCompositeOperation = "destination-out"; 可以實現橡皮擦點選經過的地方顯示原始背景色。程式碼實現如下:
Html程式碼:
<input type="button" value="橡皮擦" class="eraser btn" id="eraser" onclick="checkeraser()" /> <input type="button" value="取消橡皮擦" class="uneraser btn" id="uneraser" onclick="canceleraser()" />
Js程式碼:
//選中橡皮擦 function checkeraser(){ document.getElementById("eraser").value = "正在使用..."; cvs.lineWidth = 20; cvs.globalCompositeOperation = "destination-out"; function getBoundingClientRect(x,y){ var box = canvas.getBoundingClientRect(); //獲取canvas的距離瀏覽器視窗的上下左右距離 return {x:x-box.left, y:y-box.top } } canvas.onmousedown = function(e){ var first = getBoundingClientRect(e.clientX,e.clientY); cvs.save(); cvs.beginPath(); cvs.moveTo(first.x,first.y); drawing = true; } canvas.onmousemove = function(e){ if(drawing){ var move = getBoundingClientRect(e.clientX,e.clientY); cvs.save(); cvs.lineTo(move.x,move.y); cvs.stroke() cvs.restore() } } canvas.onmouseup = function(){ drawing = false; } canvas.onmouseleave = function(){ drawing = false; canvas.onmouseup(); } }
3清除畫布
清空畫布只需要呼叫clearRect() 方法,實現清空給定矩形內的指定畫素。程式碼如下:
Html程式碼:
<input type="button" value="清除畫布" class="clear fun" onclick="clearb()" />
Js程式碼:
//清除畫布功能 function clearb (){ cvs.clearRect(0,0,800,800); }
4下載圖片
下載圖片的部分程式碼和生成畫布實現繪畫的程式碼寫在同一個方法中,一併貼出來了,可以自行刪改。以下是實現程式碼:
Html程式碼:
<input type="button" value="清除畫布" class="clear fun" onclick="clearb()" />
Js程式碼:
//儲存圖片 window.onload = function(){ var penWeight = 0; //畫筆粗細 var penColor = ''; //畫筆顏色 canvas.onmousedown = function(e){ /*找到滑鼠(畫筆)的座標*/ var start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft; var start_y = e.clientY - canvas.offsetTop + document.body.scrollTop; cvs.beginPath(); //開始本次繪畫 cvs.moveTo(start_x, start_y); //畫筆起始點 /*設定畫筆屬性*/ cvs.lineCap = 'round'; cvs.lineJoin ="round"; cvs.strokeStyle = penColor; //畫筆顏色 cvs.lineWidth = penWeight; //畫筆粗細 canvas.onmousemove = function(e){ /*找到滑鼠(畫筆)的座標*/ var move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft; var move_y = e.clientY - canvas.offsetTop + document.body.scrollTop; cvs.lineTo(move_x, move_y); //根據滑鼠路徑繪畫 cvs.stroke(); //立即渲染 } canvas.onmouseup = function(e){ cvs.closePath(); //結束本次繪畫 canvas.onmousemove = null; canvas.onmouseup = null; } canvas.onmouseleave = function(){ cvs.closePath(); canvas.onmousemove = null; canvas.onmouseup = null; } } var dlButton = document.getElementById("downloadImageBtn"); bindButtonEvent(dlButton,"click",saveAsLocalImage) } function bindButtonEvent(element, type, handler) { if(element.addEventListener) { element.addEventListener(type, handler, false); } else { element.attachEvent('on'+type, handler); } } function saveAsLocalImage () { var myCanvas = document.getElementById("canvas"); var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); window.location.href=image; }作者:傑瑞教育
出處:
臺傑瑞教育科技有限公司和部落格園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連線,否則保留追究法律責任的權利。
技術諮詢:
相關推薦
使用Canvas製作畫圖工具
前 言 JRedu canvas是HTML5中重要的元素之一,canvas元素使用JavaScript在網頁上繪製圖像,畫布是一個矩形區域,我們可以控制其每一個元素,並且canvas擁有多種的繪製路徑、矩形、圓形、字元以及新增影象的方法。 這一章我們使用canvas來做一個畫圖工具,並且支援下載圖片
Canvas實現畫圖工具
window.onload = function() { var cvs = document.getElementById("mycanvas"); var plt = document.getElementById("mycanvas").getContext("
基於HTML5 Canvas和jQuery的畫圖工具的實現
//undo redo var history =new Array(); var cStep = -1;
運用canvas製作簡單的畫圖
html部分:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <
畫圖工具除了echarts我使用highcharts
line ext 文件 target false 收盤價 edits 大盤 top 文件 :密碼:xewx 官方文檔教程地址:https://www.hcharts.cn/docs/basic-color 上手容易,api友好,盡管也有不盡人意的地方,但是它很適合我當前的項
Linux Centos7安裝配置畫圖工具Graphviz
graphviz一、安裝 yum -y install graphviz 二、測試 1、測試是否安裝成功[root@localhost ~]# which dot/usr/bin/dot[root@localhost ~]# dot -Vdot - graphviz version 2.30.1 (20150
Java關於畫圖工具常用顏色預留區的顏色添加
顏色編輯 簡單 一次 png 做出 想法 靜態 其實在 code 為了加深對面向對象編程的理解,我希望通過使用swing包和awt包的類實例化對象,去加深面向對象這個概念。於是想編寫一個簡易的畫圖工具。 目前實現的功能相對簡單,工具欄共有五個功能面板,分別是:圖形選擇
論文畫圖工具
快速 適合 ESS 簡潔 svg 總結 png mini 包括 本文總結了在windows下面為論文畫圖和表格的一些工具和註意事項。 1、latex插入圖片應該插入eps格式而不是jpg、png這種,eps是矢量圖,顯示更加清晰。 2、有個叫gvedit的軟件,用來畫流程圖
canvas--製作坦克大戰(demo)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style&
canvas製作(小demo)---圓球碰壁反彈
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
canvas製作鐘錶小案例
實現原理:canvas繪製圓的知識以及Date物件 window.onload=function (){ var myCanvas=document.querySelector('#myCanvas'); var cxt=myCanvas
canvas製作滑鼠繪圖和方塊移動小案例
在這裡插入圖片描述 canvas製作滑鼠繪圖: 原理:獲取開始點選的點 和滑鼠移動後的點 所用知識:event物件 canvas繪圖 window.onload=function (){ var myCanvas=document.querySele
Qt 畫圖工具擦除操作,恢復透明色
在以transparent填充的QPixmap上用紅色畫筆畫出了線,現需要擦除部分紅色,恢復出原來的透明色。 使用QPainter::CompositionMode 影象疊加模式 下圖簡單示意了10種模式: 在Qt的官方文件裡我們也找到了具體模式的解釋
ros畫圖工具rxplot的使用
按照以下程式傳送訊息, #include <ros/ros.h> #include <ros/console.h> #include <std_msgs/Int32.h> #include <geometry_msgs/Vector3.
canvas製作動態文字顆粒動畫
久違的想玩下,且回顧下canva顆粒動畫製作,在codepen中找了個小案例,看了下原始碼,學習下,覺得很不錯,拿出來給大家分享下: 一、最終預覽效果: 二、核心程式碼邏輯 1. 初始化canvas畫布大小 2. canvas繪製文字,設定文字大小,文字位置 3. 繫結滑鼠事件
點陣 畫圖 工具
弄過點陣的都知道畫需要一個畫圖的工具,但是現在很多基本都是C端的產品,沒有什麼HTML 實現的功能,我也是一個比較喜歡微控制器的(菜雞);所以就寫了一個點陣的畫圖工具 , 直接將下面的程式碼 複製到HTML 裡面就可以用 #貼程式碼時間 <!DOCTYPE html> <h
最近關於PyQt5窗體畫圖工具的總結
起因: 最近接手了一個小專案,需要用PyQt5畫折線動圖 過程: 主要探索過程分以下幾步: 1.首先上網找關於PyQt5的知識,以及教程帖子,其中一個寫的比較好的教程如下: https://github.com/maicss/PyQt5-Chinese-tutoral 2.開
利用python製作黑客工具盜取U盤資料!
我們利用Python爬蟲可以獲取別人的資料產物。同理,拓展一下我們是不是也可以用Python寫一個指令碼獲取別人U盤上的資料呢! 答案是肯定可以的! 思路:當U盤插入到樹莓派的USB插口上時,被插入的U盤中檔案的名稱及檔案路徑資訊將生成一個TXT格式的檔案,之後傳入到
html5 <canvas>畫圖
坐標軸 坐標 icc 十六進制 global ref 字體樣式 都在 水平 <canvas></canvas>是html5出現的新標簽 context是一個封裝了很多繪圖功能的對象,獲取這個對象的方法是 var context=canvas.get
QT如何自定義滑鼠樣式及如何用windows自帶畫圖工具進行滑鼠樣式的設計
眾所周知,QT系統自身擁有眾多的滑鼠樣式,這些滑鼠樣式均比較常見,顏色、樣式為系統所固有,無法更改。哪麼能不能自定義滑鼠的形狀、顏色等特點呢?答案是可以的。自定義的滑鼠樣式可以隨意指定,顏色更是多種多樣,極具個性化。 QT自帶的滑鼠樣式(在此不做過多介紹): 可以直接拿來用,具體用法如下: