canvas 简易像素画板

UnixAgain 发布于2019-08-20 16:07 / 722人阅读

摘要：个人博客库下载大致思路自己画随机传入对象和参数可不传参数背景色默认填充色默认方块大小默认方法清除所有方块随机生成多少个方块增加鼠标点击移动绘画实例库使用

个人博客 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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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