javascript+Canvas實現(xiàn)畫板功能

更新時間：2020年06月23日 15:59:04 作者：許俊活

這篇文章主要為大家詳細介紹了javascript+Canvas實現(xiàn)畫板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Canvas實現(xiàn)畫板功能的具體代碼，供大家參考，具體內(nèi)容如下

CSS樣式代碼

body,
 html {
 text-align: center;
 padding-top: 20px;
 /*margin: 0;*/
 }

canvas {
 box-shadow: 0 0 10px #333;
 margin: 0 auto;
 /*position: absolute;
 left: 0; 
 border: 1px solid red;*/
}

這是主體代碼

<body onload="draw()">
 <canvas id="canvas" width="800" height="600">
 </canvas>
 <script>
 function draw() {
 var canvas = document.getElementById("canvas");
 if (canvas.getContext) {
 var ctx = canvas.getContext('2d');
 //涂鴉
 //添加鼠標按下事件
 canvas.onmousedown=function(e){
  var ev=e||window.event;//兼容性
  var x=ev.clientX-canvas.offsetLeft;
  var y=ev.clientY-canvas.offsetTop;
  
 ctx.strokeStyle='red';
 ctx.lineWidth=10;
  
 ctx.beginPath();
 ctx.moveTo(x,y);

 //onmousemove
 canvas.onmousemove=function(e){
 var ev=e||window.event;//兼容性
 var x=ev.clientX - canvas.offsetLeft;
 var y=ev.clientY - canvas.offsetTop;
 ctx.lineTo(x,y);
 ctx.stroke();
 }
  canvas.onmouseup=function(){
  canvas.onmousemove="";//當鼠標不點擊時則不會畫畫
  
  }
 }
 }
   }
</script>
</body>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JavaScript中第三方庫Apollo的使用詳解
Apollo 是一個廣泛使用的 JavaScript 第三方庫,主要用于構(gòu)建與 GraphQL API 交互的應用程序,下面就跟隨小編一起來學習一下它的具體應用吧
2024-02-02
小程序中this.setData的使用和注意事項
這篇文章主要介紹了微信小程序中this.setData的使用和注意事項,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-08-08
JavaScript中?Promise?的使用技巧
這篇文章主要介紹了JavaScript中?Promise?的使用技巧，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-08-08
關于JavaScript中高階函數(shù)的魅力詳解
高階函數(shù)：英文叫Higher-order function。JavaScript的函數(shù)其實都指向某個變量。下面這篇文章主要給大家介紹了關于JavaScript中高階函數(shù)的魅力，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下
2018-09-09
淺談Webpack4 plugins 實現(xiàn)原理
在wabpack 核心功能除了loader應該就是plugins插件了，本文主要介紹了Webpack4 plugins 實現(xiàn)原理，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
js導出格式化的excel 實例方法
最常見的方式是使用js函數(shù)操作excle文件，這種方式可能因瀏覽器不同，存在兼容性問題。另一種簡單方法就是導出一個excel能識別格式的xml文件，用excel打開。
2013-07-07
Javascript之面向?qū)ο?-方法
本篇文章主要介紹了Javascript的面向?qū)ο?，對對象方法的調(diào)用、私有方法、靜態(tài)方法、公有方法、特權(quán)方法進行了一一介紹，需要的朋友可以看下
2016-12-12
javascript 密碼框防止用戶粘貼和復制的實現(xiàn)代碼
本篇文章主要是對javascript 密碼框防止用戶粘貼和復制的實現(xiàn)代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
Base64(二進制)圖片編碼解析及在各種瀏覽器的兼容性處理
這篇文章主要介紹了Base64(二進制)圖片編碼解析及在各種瀏覽器的兼容性處理,需要的朋友可以參考下
2017-02-02
更優(yōu)雅的事件觸發(fā)兼容
對于JS框架開發(fā)中的客戶端（瀏覽器）兼容難題，各位想必都不陌生。平常，我們都用if去面對接口不一致以及成堆的bug。然而，這里介紹的方法卻可以讓兼容更加優(yōu)雅
2011-10-10