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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
微信 java 實現(xiàn)js-sdk 圖片上傳下載完整流程
這篇文章主要介紹了微信 java 實現(xiàn)js-sdk 圖片上傳下載完整流程的相關資料,需要的朋友可以參考下2016-10-10
php上傳圖片并給圖片打上透明水印的代碼，需要的朋友可以參考下。2010-06-06
JavaScript 核心參考教程RegExp對象,學習正則表達式的朋友可以參考下。2009-10-10
各種方法判斷客戶端瀏覽器是否安裝了Flash插件，對于必須要支持flash才能瀏覽的頁面來說，提前做下說明，用戶體驗會更好。2010-08-08
這篇文章主要介紹了Bootstrap實現(xiàn)響應式導航欄效果，導航欄是一個很好的功能，是Bootstrap網(wǎng)站的一個突出特點，本文帶領大家學習實現(xiàn)Bootstrap導航欄,需要的朋友可以參考下2015-12-12
深入淺析JS Function()構(gòu)造函數(shù)
這篇文章給大家介紹了js function()構(gòu)造函數(shù)的知識以及關于function()構(gòu)造函數(shù)需要注意的幾個要點，本文介紹的非常不錯，具有參考借鑒價值，感興趣的朋友一起看下吧2016-08-08
這篇文章主要介紹了解決前端跨域問題8種方案的相關資料,需要的朋友可以參考下2016-11-11
js 驗證密碼強弱的小例子，需要的朋友可以參考一下2013-03-03
Javascript中valueOf與toString區(qū)別淺析
Javascript中valueOf與toString區(qū)別淺析，需要的朋友可以參考一下2013-03-03
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)tab頁面切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08