快捷導(dǎo)航

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

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

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

本文實(shí)例為大家分享了Canvas實(shí)現(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');
 //涂鴉
 //添加鼠標(biāo)按下事件
 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="";//當(dāng)鼠標(biāo)不點(diǎn)擊時(shí)則不會(huì)畫畫
  
  }
 }
 }
   }
</script>
</body>

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

您可能感興趣的文章:

相關(guān)文章

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