2. 程式人生 > >Canvas實現畫圖工具

Canvas實現畫圖工具

阿新 • • 發佈：2019-01-01
window.onload = function() { var cvs = document.getElementById("mycanvas"); var plt = document.getElementById("mycanvas").getContext("2d"); var btn_1 = document.getElementById("reset"); var black = document.getElementById("color_0"); var blue = document.getElementById("color_1"
); var green = document.getElementById("color_2"); var red = document.getElementById("color_3"); var wth_1 = document.getElementById("wth_1"); var wth_2 = document.getElementById("wth_2"); var wth_3 = document.getElementById("wth_3"); var eraser = document.getElementById("eraser"
); var save = document.getElementById("save"); var is_eraser = false; // plt.fillStyle = "#000"; // plt.strokeStyle = "#999" // plt.lineWidth = 10; // plt.lineJoin = "round"; // plt.fillRect(10,10,100,100); // plt.strokeRect(10,10,100,100) // plt.beginPath();
// plt.moveTo(10,10); // plt.lineTo(10,100); // plt.lineTo(100,100); // plt.closePath(); // plt.stroke(); cvs.onmouseover = function(ev) { ev.preventDefault(); } cvs.onmousedown = function(ev) { //每次都從一個新起點開始，會預設結束上一個。寫restore的話會閉合影象 plt.beginPath(); plt.moveTo(ev.pageX - cvs.offsetLeft, ev.pageY - cvs.offsetTop); cvs.onmousemove = function(ev) { plt.lineTo(ev.pageX - cvs.offsetLeft, ev.pageY - cvs.offsetTop); plt.stroke(); } } document.onmouseup = function() { cvs.onmousemove = null; } btn_1.onclick = function() { plt.clearRect(0, 0, 600, 500); } black.onclick = function() { if(!is_eraser){ plt.strokeStyle = "rgb(0,0,0)"; } } blue.onclick = function() { if(!is_eraser){ plt.strokeStyle = "rgb(71,174,249)"; } } green.onclick = function() { if(!is_eraser){ plt.strokeStyle = "rgb(165,222,55)"; } } red.onclick = function() { if(!is_eraser){ plt.strokeStyle = "rgb(255,67,81)"; } } wth_1.onclick = function() { if(!is_eraser){ plt.lineWidth = 1; } } wth_2.onclick = function() { if(!is_eraser){ plt.lineWidth = 3; } } wth_3.onclick = function() { if(!is_eraser){ plt.lineWidth = 5; } } eraser.onclick = function(){ if (!is_eraser) { plt.save(); plt.strokeStyle = "rgb(255,255,255)"; plt.lineWidth = 12; eraser.innerHTML = "點選取消"; is_eraser = true; $(cvs).css("cursor", "url('eraser.ico'),auto"); } else { plt.restore(); eraser.innerHTML = "橡皮擦"; is_eraser = false; $(cvs).css("cursor", "url('pen.ico'),auto"); } } save.onclick = function(){ //抄的，不理解為什麼這樣 var image = cvs.toDataURL("image/png").replace("image/png", "image/octet-stream"); window.location.href=image; } }

相關推薦

Canvas實現畫圖工具

window.onload = function() { var cvs = document.getElementById("mycanvas"); var plt = document.getElementById("mycanvas").getContext("

使用Canvas製作畫圖工具

  前  言 JRedu 　canvas是HTML5中重要的元素之一，canvas元素使用JavaScript在網頁上繪製圖像，畫布是一個矩形區域，我們可以控制其每一個元素，並且canvas擁有多種的繪製路徑、矩形、圓形、字元以及新增影象的方法。 這一章我們使用canvas來做一個畫圖工具，並且支援下載圖片

純QML實現畫圖工具

        前言，QT5 版本較Qt4 新增了Canvas（畫布），可以通過Js實現2D繪圖，與HTML5提供的API保持一致，使用非常靈活。下面將介紹使用QML製作簡單的畫圖工具。     首先，介紹整體佈局為。最上側是選單，下面是工具條，中間是Canvas（畫布）

基於HTML5 Canvas和jQuery的畫圖工具的實現

         //undo redo                               var history =new Array();                               var cStep = -1;                                

canvas實現簡單的畫圖功能

var bot;//畫布div var X,Y,X1,Y1;//座標 var flag=0; var time;//定時器ID var color=0;//記住所選顏色 var lineW=2;//畫筆粗細

canvas實現視頻截圖

context onclick 實現 spl val src text button ext2 截取視頻當前播放畫面，直接上源碼。 <body> <div class="container"> <video id="test

用css3和canvas實現的蜂窩動畫效果

image() all nim 自己 clas 函數 顯示 var 不兼容 近期工作時研究了一下css3動畫和js動畫。主要是工作中為了增強頁面的趣味性，大家都有意無意的加入了非常多動畫效果。當然大部分都是css3動畫效果。能夠gpu加速，這會降低移動端的性能需求。 今

趙雅智_運用Bitmap和Canvas實現圖片顯示，縮小，旋轉，水印

bitmap raw 圖形 res efault ast bmp 運用 放置 上一篇已經介紹了Android種Bitmap和Canvas的使用，以下我們來寫一個詳細實例 http://blog.csdn.net/zhaoyazhi2129/article/details

畫圖工具除了echarts我使用highcharts

line ext 文件 target false 收盤價 edits 大盤 top 文件 ：密碼：xewx 官方文檔教程地址：https://www.hcharts.cn/docs/basic-color 上手容易，api友好，盡管也有不盡人意的地方，但是它很適合我當前的項

使用canvas實現環形進度條

cti anim 效果 math png utf-8 context request var html代碼： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta

canvas實現刮圖效果

move 技術 flag blog tex 保留 ast rec 效果 <canvas id="myCanvas" width=300 height=300></canvas> JavaScript代碼: var canvas = doc

HTML5 file API加canvas實現圖片前端JS壓縮並上傳 （轉載）

www. 手機 回調 pre lan 瀏覽器中 rdp 效果 二進制 一、圖片上傳前端壓縮的現實意義 對於大尺寸圖片的上傳，在前端進行壓縮除了省流量外，最大的意義是極大的提高了用戶體驗。 這種體驗包括兩方面： 由於上傳圖片尺寸比較小，因此上傳速度會比較快，交互會更

canvas實現刮刮卡效果

分享圖片 tlist global site class height fill color overflow canvas實現刮刮卡效果 實現步驟： 設置頁面背景圖，即刮刮卡底部圖片 繪制canvas 刮刮卡頂部圖片drawImage 綁定事件 addEventList

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

Canvas實現3D效果-可旋轉的立方體

獲得 操作 陰影 換算 http 取出 main TP 變換 摘要：Canvas畫布是一個二維平面，如何展示出3D效果？通過將三維空間中的Z軸抽取出來，將圖像的點投影到與Z軸垂直的平面上，在通過旋轉等變換效果，我們就能實現3D效果。 一、建立坐標系 1）立方體坐標系

Java關於畫圖工具常用顏色預留區的顏色添加

顏色編輯 簡單 一次 png 做出 想法 靜態 其實在 code 為了加深對面向對象編程的理解，我希望通過使用swing包和awt包的類實例化對象，去加深面向對象這個概念。於是想編寫一個簡易的畫圖工具。 目前實現的功能相對簡單，工具欄共有五個功能面板，分別是：圖形選擇

canvas實現3D魔方

TP earch 哪些 類圖 點距 圖片 sea 渲染 繪制圖像 摘要：使用canvas實現可交互的3D魔方 一、簡單分析 魔方物理性質： 1.中心塊（6個）：中心塊與中心軸連接在一起，但可以順著軸的方向自由的轉動。 2.棱塊（12個）：棱塊的表面是兩個正方形，結構類似一個

學習 | canvas實現圖片懶加載 && 下滑底部加載

window back mov code 圖片 wim .com rod pro 　　用canvas實現圖片的懶加載並且下滑到據底部60px的時候再次加載數據，模仿UC瀏覽器的新聞加載。 　　完整代碼：https://github.com/dirkhe1051931999

C語言實現聊天工具鐘的抖動窗口功能，代碼很簡單，思路也很簡單

.com 微信公眾號 eight 後來 這就是 get -i 答案 ros 想必都知道QQ聊天對話框中，有一個抖動個功能，相信大家也都用過，但能否用C語言做出來呢？答案肯定是可以的！ 至於如何，今天就為大家分享出來！這就是今天的主題。 制作流程：簡直簡單的小編都不好意思說

論文畫圖工具

快速 適合 ESS 簡潔 svg 總結 png mini 包括 本文總結了在windows下面為論文畫圖和表格的一些工具和註意事項。 1、latex插入圖片應該插入eps格式而不是jpg、png這種，eps是矢量圖，顯示更加清晰。 2、有個叫gvedit的軟件，用來畫流程圖