欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js+canvas實現(xiàn)畫板功能

 更新時間:2020年09月13日 12:56:58   作者:暗鎖讀客  
這篇文章主要為大家詳細介紹了js+canvas實現(xiàn)畫板功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

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); // 移動途中和結束位置
  contxt.stroke(); // 結束渲染畫布
 }
 }
// 鼠標松開事件
mycanvas.onmouseup = function() {
 flag = false;
}

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

相關文章

  • Node.js模擬瀏覽器文件上傳示例

    Node.js模擬瀏覽器文件上傳示例

    這篇文章主要介紹了Node.js模擬瀏覽器文件上傳的實現(xiàn)代碼,需要的朋友可以參考下
    2014-03-03
  • js編寫貪吃蛇的小游戲

    js編寫貪吃蛇的小游戲

    本文為大家介紹的是使用JS寫的貪吃蛇游戲,個人練習之用,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望對大家學習js有所幫助
    2015-12-12
  • Swiper自定義分頁器使用詳解

    Swiper自定義分頁器使用詳解

    這篇文章主要為大家詳細介紹了Swiper自定義分頁器的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-12-12
  • 微信小程序合法域名配置方法

    微信小程序合法域名配置方法

    這篇文章主要介紹了微信小程序合法域名配置,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • js 編程筆記 無名函數(shù)

    js 編程筆記 無名函數(shù)

    無名函數(shù),其中一個作用可能是生成新的函數(shù)對象的引用,主要是用于定義。
    2011-06-06
  • 詳解如何愉快的在微信小程序中使用SVG圖標

    詳解如何愉快的在微信小程序中使用SVG圖標

    這篇文章主要介紹了詳解如何愉快的在微信小程序中使用SVG圖標,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-03-03
  • javascript中的offsetWidth、clientWidth、innerWidth及相關屬性方法

    javascript中的offsetWidth、clientWidth、innerWidth及相關屬性方法

    這篇文章主要介紹了javascript中的offsetWidth、clientWidth、innerWidth及相關屬性方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-05-05
  • js實現(xiàn)無縫滾動雙圖切換效果

    js實現(xiàn)無縫滾動雙圖切換效果

    這篇文章主要為大家詳細介紹了js實現(xiàn)無縫滾動雙圖切換效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-07-07
  • jqgrid 表格數(shù)據(jù)導出實例

    jqgrid 表格數(shù)據(jù)導出實例

    jqgrid并沒有自帶導出表格數(shù)據(jù)的方法,這里就自己實現(xiàn)了一個,嘗試過在頁面直接將數(shù)據(jù)導出,發(fā)現(xiàn)只有IE下可以通過調用saveas來實現(xiàn),但是別的瀏覽器不支持,于是考慮將數(shù)據(jù)傳回后臺,然后后臺返回下載文件來實現(xiàn)
    2013-11-11
  • JavaScript基于對象方法實現(xiàn)數(shù)組去重及排序操作示例

    JavaScript基于對象方法實現(xiàn)數(shù)組去重及排序操作示例

    這篇文章主要介紹了JavaScript基于對象方法實現(xiàn)數(shù)組去重及排序操作,涉及javascript基于對象方法的數(shù)組遍歷、比較、去重、排序等相關操作技巧,需要的朋友可以參考下
    2018-07-07

最新評論