js+canvas實現(xiàn)畫板功能
更新時間：2020年09月13日 12:56:58 作者：暗鎖讀客
這篇文章主要為大家詳細介紹了js+canvas實現(xiàn)畫板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js+canvas實現(xiàn)畫板功能的具體代碼，供大家參考，具體內(nèi)容如下
1.實現(xiàn)了畫圖，改變畫筆粗細，改變畫筆顏色，清屏功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>畫板</title> <link rel="shortcut icon" type="image/x-icon" href="img/an.ico" /> <link rel="stylesheet" type="text/css" href="css/drow.css" /> </head> <body> <canvas id="mycanvas" width="1100px" height="660px"></canvas> <div class="tool"> 畫筆顏色:<input type="color" name="color1" id="color1"/><br /> 畫筆粗細:<input type="range" name="range1" id="range1"min="1" max="20"/><br /> <button class="btn">清屏</button> </div> </body> <script src="js/drow.js" type="text/javascript" charset="utf-8"></script> </html>
*{
margin: 0;
padding: 0;
text-align: left;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
#mycanvas{
border: 2px solid deepskyblue;
}
.tool{
width: 260px;
height: 100%;
position: fixed;
right: 0;
top: 0;
background-color: #CCCCCC;
}
//獲取對象
var mycanvas = document.getElementById("mycanvas");
var color1 = document.getElementById("color1");
var range1 = document.getElementById("range1");
var btn = document.getElementsByClassName("btn")[0];
var contxt = mycanvas.getContext("2d");
btn.onclick=function () {
contxt.clearRect(0,0,1200,660);
}
var flag = false;
var x = 0,
y = 0;
// 鼠標點下事件
mycanvas.onmousedown = function(event) {
flag = true;
// 獲取鼠標點下的開始位置
var x = event.clientX - mycanvas.offsetLeft;
var y = event.clientY - mycanvas.offsetTop;
contxt.beginPath(); // 開始新建路徑
contxt.strokeStyle = color1.value; // 獲得顏色賦值給畫筆
contxt.lineCap="round";
contxt.lineWidth = range1.value; // 獲得畫筆寬度賦值給畫筆
contxt.moveTo(x, y); // 開始位置
}
// 鼠標移動事件
mycanvas.onmousemove = function(event) {
// 獲取鼠標在移動的位置
var mX = event.clientX - mycanvas.offsetLeft;
var mY = event.clientY - mycanvas.offsetTop;
if (flag) {
contxt.lineTo(mX, mY); // 移動途中和結(jié)束位置
contxt.stroke(); // 結(jié)束渲染畫布
}
}
// 鼠標松開事件
mycanvas.onmouseup = function() {
flag = false;
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Node.js模擬瀏覽器文件上傳的實現(xiàn)代碼,需要的朋友可以參考下2014-03-03
本文為大家介紹的是使用JS寫的貪吃蛇游戲，個人練習之用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望對大家學習js有所幫助2015-12-12
這篇文章主要為大家詳細介紹了Swiper自定義分頁器的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要介紹了微信小程序合法域名配置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
無名函數(shù)，其中一個作用可能是生成新的函數(shù)對象的引用，主要是用于定義。2011-06-06
這篇文章主要介紹了詳解如何愉快的在微信小程序中使用SVG圖標,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法
這篇文章主要介紹了javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)無縫滾動雙圖切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
jqgrid并沒有自帶導(dǎo)出表格數(shù)據(jù)的方法，這里就自己實現(xiàn)了一個，嘗試過在頁面直接將數(shù)據(jù)導(dǎo)出，發(fā)現(xiàn)只有IE下可以通過調(diào)用saveas來實現(xiàn)，但是別的瀏覽器不支持，于是考慮將數(shù)據(jù)傳回后臺，然后后臺返回下載文件來實現(xiàn)2013-11-11
JavaScript基于對象方法實現(xiàn)數(shù)組去重及排序操作示例
這篇文章主要介紹了JavaScript基于對象方法實現(xiàn)數(shù)組去重及排序操作,涉及javascript基于對象方法的數(shù)組遍歷、比較、去重、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07