Canvas實現滑鼠在網頁上塗畫

阿新 • • 發佈：2019-02-14

使用Canvas實現，滑鼠在網頁上進行塗抹繪畫。
效果如下：

這裡寫圖片描述

主要是使用了canvas繪圖，圖畫的軌跡是利用一張黑色圓點圖片重複繪製疊加而成，具備點選瀏覽器前進或後退按鈕的實現返回前一筆畫或後一筆畫的功能。
注意，因為這裡用到了getImageData()方法，所以需要在Web伺服器中開啟。
程式碼如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title 
>Canvas Write</title>
  <style>
    #canvas{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      margin:0;
    }
    #image{
      // 把需要用來繪製軌跡的黑色圓點圖片隱藏起來
      display: none;
    }
  </style>
</head>
<body>
  <canvas id='canvas' width 
='400' height='300'></canvas>
  <img id='image' width='6' width='6' src="1.png" alt="">
</body>
</html>

<script>
  var image=document.getElementById('image');
  var canvas=document.getElementById('canvas');
  var context=canvas.getContext('2d');
  var isDrawing=false;
  var 
 state=context.getImageData(0,0,canvas.width,canvas.height);
  // 網頁剛初始化後，將初始狀態的網頁狀態存到瀏覽器快取中
  history.pushState(state,null);

  canvas.addEventListener('mousedown',startDrawing,false);
  canvas.addEventListener('mousemove',draw,false);
  canvas.addEventListener('mouseup',stopDrawing,false);

  function startDrawing() {
    // 使用此引數來規範滑鼠行為，只有滑鼠左鍵按下才能繪製軌跡
    isDrawing=true;
  }
  function draw() {
    if(isDrawing){
        var sx=canvas.width/canvas.offsetWidth;
        var sy=canvas.height/canvas.offsetHeight;
        var x=sx*event.clientX-image.offsetWidth/2;
        var y=sy*event.clientY-image.offsetHeight/2;
        // 根據黑色圓點小圖片重複多次繪製軌跡
        context.drawImage(image,x,y)
      }
  }

  function stopDrawing() {
    isDrawing=false;
    var state=context.getImageData(0,0,canvas.width,canvas.height);
    // 滑鼠左鍵彈起，表明當前軌跡結束，儲存當前狀態，以便於瀏覽器歷史記錄
    history.pushState(state,null)
  }

  window.onpopstate =function loadState(e) {
    // 瀏覽器後退功能，首先擦除當前畫布上所有內容
    context.clearRect(0,0,canvas.width,canvas.height);
    // 然後將前一個狀態繪製到網頁上
    if(e.state){
      context.putImageData(e.state,0,0);
    }
  }
</script>

Canvas實現滑鼠在網頁上塗畫

使用Canvas實現，滑鼠在網頁上進行塗抹繪畫。效果如下：主要是使用了canvas繪圖，圖畫的軌跡是利用一張黑色圓點圖片重複繪製疊加而成，具備點選瀏覽器前進或後退按鈕的實現返回前一筆畫或後一

canvas 實現滑鼠畫出矩形

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <m

jQuery實現滑鼠移上彈出提示框，移出消失

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

使用canvas實現滑鼠跟隨驚人特效！

最近在咕泡學院的VIP學習中看到利用canvas實現各種效果，我也仿照做一個。由於學習了vue和es6我決定用vue和es6的新特性來實現。接下來讓我們一步一步來建立一個。第一步，建立html加入

Java實現從網頁上傳匯入excel資料到資料庫

一晃已經是十月份的最後一天了，時間過得很快... 專案中通過excel往資料庫批量匯入的功能頗為常見，所以今天整理出來一份簡單的例子，為了以後方便使用，同時也為大家實現功能作為一個參考

css3實現滑鼠移上圖片放大遮罩效果

最近學習了一些關於HTML5和CSS3方面的知識，通過一些小例子鞏固一下，拓展自己知識面。小例子使用CSS3實現當滑鼠滑到圖片上，會出現放大、遮罩的效果。請看下面截圖，PS：原始碼下載見下面網址，另

Java工具 java實現從網頁上覆製表格，自動生成Markdown形式表格

java實現從網頁上覆製表格需求分析例如我這裡有一個表格：表格裡的文字是可複製的，複製下來的文字如下。序號方法描述 1 public URL(String spec) throws MalformedURLExceptio

如何用html5實現在網頁上顯示本地攝像頭

HTML5技術支援WebApp在手機上拍照，顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能，當然你也可以在其它型別應用中適當使用此技術。　　1、視訊流　　HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可程式設計訪問，

canvas實現滑鼠繪圖

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sc

文件dropload.js外掛實現webApp網頁上滑重新整理下拉載入更多

文件說明需要引入的檔案 <script src="js/zepto.min.js"></script> <script src="js/dist/dropload.

用canvas實現滑鼠拖動繪製矩形框

需要用到jCanvas外掛和jQuery。程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title

實現從網頁上抓取資料(htmlparser)

package com.jscud.test; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.InputStreamReader; impo

[開源]基於goapp+xterm實現webssh-網頁上的SSH終端linux管理工具(golang)

簡析基於goapp+xterm實現webssh-網頁上的SSH終端，linux管理工具。開源地址見文末。特性在網頁上實現一個SSH終端。從而無需Xshell之類的模擬終端工具進行SSH連線。可以對互動命令進行審計、記錄在頁面上按一個鍵，就能開啟一個webssh，並且自動登

在網頁上實現大華視頻監控攝像頭在線

head sta meta net utf body kde .org http 1.編寫代碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

python+opencv選出視頻中一幀再利用鼠標回調實現圖像上畫矩形框

open cap 圖像 ide http 這樣的 vedio lease 等待　　最近因為要實現模板匹配，需要在視頻中選中一個目標，然後框出（即作為模板），對其利用模板匹配的方法進行檢測。於是需要首先選出視頻中的一幀，但是在利用攝像頭讀視頻的過程中我唯一能想到的方法就是：

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

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

javascript復制內容到剪切板/網頁上的復制按鈕的實現

element ntb 標簽測試 .exe round demo blog post javascript復制內容到剪切板/網頁上的復制按鈕的實現：DEMO如下 <!doctype html> <html> <head> <me

發送ajax請求實現上傳圖片顯示在網頁上

sse set url orm 顯示 ini session load file 1 <?php 2 // 1,通過超全局變量來獲取files[上傳的圖片名稱] 3 $file = $_FILES["files"] 4 // 2,在通過strrchr

canvas 元素用於在網頁上繪制圖形。

target 圖像 borde scrip ext image() mage javascrip 參數什麽是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。畫布是一個矩形區域，您可以控制其每一像素。 canvas 擁有多

教你如何在網頁上用利用H5快速實現動畫效果

meta ole adding play tor margin time 方式 scrip 在web開發中，GIF動畫效果是隨處可見，比如常見的loading加載、人物奔跑的gif圖片等等，那麽這些都是怎麽實現的呢？其實實現的原理很簡單，簡而言之，這些所謂的動畫都是一幀一幀

Canvas實現滑鼠在網頁上塗畫

相關推薦