canvas 簡易像素畫板

UnixAgain 發布于2019-08-20 16:07 / 764人閱讀

摘要：個人博客庫下載大致思路自己畫隨機傳入對象和參數可不傳參數背景色默認填充色默認方塊大小默認方法清除所有方塊隨機生成多少個方塊增加鼠標點擊移動繪畫實例庫使用

個人博客 http://taoquns.com/paper/59ba...
github https://github.com/Taoqun/can...
download 庫下載canvas.toDataURL https://github.com/rndme/down...

大致思路

自己畫

隨機

傳入 canvas對象和 options參數（可不傳） run( canvas , option )
參數

bgColor 背景色默認 #e8e8e8

clickedColor 填充色默認 #ff0000

boxSize 方塊大小默認 30
方法

clean 清除所有方塊

Random（number）隨機生成多少個方塊

增加鼠標點擊移動繪畫

實例

html

js庫

function run(canvas, obj) {

    obj = obj || {}
    this.canvas = canvas
    this.cvs = canvas.getContext("2d")
    this.bgColor = obj.bgColor || "#e8e8e8"
    this.clickedColor = obj.clickedColor || "#ff0000"
    this.boxSize = obj.boxSize || 30
    this.bgWidthLength = 0
    this.bgHeightLength = 0
    this.clickedArr = []
    this.start()
    this.click()
    return this
}
run.prototype.start = function(){

    this.bgWidthLength = parseInt( this.canvas.width / this.boxSize )
    this.bgHeightLength = parseInt( this.canvas.height / this.boxSize )
    this.drawBg()

}
run.prototype.click = function(){

    let move = this.mousemove.bind(this)

    this.canvas.addEventListener("mousedown",function(e){

        let o = this.computedXY(e.offsetX,e.offsetY)
        this.toggleClick(o)
    
        this.canvas.addEventListener("mousemove",move )

    }.bind(this))

    this.canvas.addEventListener("mouseup",function(e){
        this.canvas.removeEventListener("mousemove",move )
    }.bind(this))
}
run.prototype.mousemove = function(e){
    console.log(e.offsetX,e.offsetY)
    let o = this.computedXY(e.offsetX,e.offsetY)
    this.toggleClick(o,true)
}  
run.prototype.computedXY = function(x,y){

    for( let i=0;i i*this.boxSize && x < (i+1)*this.boxSize ){
            x = i
            break;
        }
    }
    for( let i=0;i i*this.boxSize && y < (i+1)*this.boxSize ){
            y = i
            break;
        }
    }

    return {x,y}
}
run.prototype.toggleClick = function(o,draw){
    let has = {}
        has.is = true

    this.clickedArr.forEach(function(item,index){

        if( item.x === o.x && item.y === o.y ){
            has.is = false
            has.index = index
        }
    })

    if(has.is){
        this.clickedArr.push(o)
        this.drawBgBox(o.x*this.boxSize,o.y*this.boxSize,true)
    }
    if(!has.is && !draw){
        this.clickedArr.splice(has.index,1)
        this.drawBgBox( o.x*this.boxSize,o.y*this.boxSize )
    }

}
run.prototype.Random = function(length){

    for(let i=0;i
使用
let canvas = document.querySelector(".main canvas")
let cvs = canvas.getContext("2d")
let a = new run(canvas)

let clean = document.querySelector(".clean");
let random = document.querySelector(".random");
let down = document.querySelector(".down");

    clean.onclick = function(){
        a.clean()
    };

    random.onclick = function(){
        a.Random(100)
    };

    down.onclick = function(){
        download(canvas.toDataURL(),"test.png","image/png")
    }

云服務器 GPU云服務器畫板尺寸繪畫板畫板 Canvas

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82722.html

如何正確設置canvas尺寸，以及如何在高分辨率屏幕上清晰顯示canvas圖形

摘要：一如何正確設置尺寸有兩種一種是屬性，一般稱其為畫布尺寸，即圖形繪制的地方。一般稱其為畫板尺寸，用于渲染繪制完成的圖形。二如何在高分辨率屏幕上清晰顯示圖形上面說過，避免圖形變形失真，要保持畫布尺寸和畫板尺寸一致。一、如何正確設置canvas尺寸？ Canvas有兩種width、height：1、一種是width、height屬性，一般稱其為畫布尺寸，即圖形繪制的地方。默認值分別為300...

未東興 2019-08-26 18:42 評論0 收藏0
如何正確設置canvas尺寸，以及如何在高分辨率屏幕上清晰顯示canvas圖形

摘要：一如何正確設置尺寸有兩種一種是屬性，一般稱其為畫布尺寸，即圖形繪制的地方。一般稱其為畫板尺寸，用于渲染繪制完成的圖形。二如何在高分辨率屏幕上清晰顯示圖形上面說過，避免圖形變形失真，要保持畫布尺寸和畫板尺寸一致。一、如何正確設置canvas尺寸？ Canvas有兩種width、height：1、一種是width、height屬性，一般稱其為畫布尺寸，即圖形繪制的地方。默認值分別為300...

cncoder 2019-08-30 15:44 評論0 收藏0
從一個畫板demo學習canvas

摘要：前言初學，做了一個畫板應用，地址點這里。本篇為的一些基礎思想和注意事項，不是基礎。主要是在于事件上的實踐經驗屏兼容屏會使用多個物理像素渲染一個獨立像素，導致一倍圖在屏幕上模糊，也是這樣，所以我們應該把畫布的大小設為元素大小的或倍。前言初學canvas，做了一個畫板應用，地址點這里。本篇為canvas的一些基礎思想和注意事項，不是基礎api。主要是在于touch事件上的實踐經驗 r...

netmou 2019-08-20 16:08 評論0 收藏0
Day08 - HTML5 Canvas 實現彩虹畫筆繪畫板指南

摘要：實現彩虹畫筆繪畫板指南作者簡介是推出的一個天挑戰。這部分不涉及內容，全部由來實現。實現彩虹畫筆繪畫板效果圖項目源碼分析源碼獲取節點支持不支持彩虹效控制筆觸大小控制繪制路徑源碼分析寬高設置屬性筆觸的形狀，有圓平方三種。 Day08 - HTML5 Canvas 實現彩虹畫筆繪畫板指南作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑...

Ajian 2019-08-20 18:18 評論0 收藏0