資訊專欄INFORMATION COLUMN
摘要：個(gè)人博客庫(kù)下載大致思路自己畫隨機(jī)傳入對(duì)象和參數(shù)可不傳參數(shù)背景色默認(rèn)填充色默認(rèn)方塊大小默認(rèn)方法清除所有方塊隨機(jī)生成多少個(gè)方塊增加鼠標(biāo)點(diǎn)擊移動(dòng)繪畫實(shí)例庫(kù)使用
個(gè)人博客 http://taoquns.com/paper/59ba...
github https://github.com/Taoqun/can...
download 庫(kù) 下載canvas.toDataURL https://github.com/rndme/down...
大致思路
自己畫
隨機(jī)
傳入 canvas對(duì)象 和 options參數(shù)（可不傳） run( canvas , option )
參數(shù)
bgColor 背景色 默認(rèn) #e8e8e8
clickedColor 填充色 默認(rèn) #ff0000
boxSize 方塊大小 默認(rèn) 30
方法
clean 清除所有方塊
Random（number） 隨機(jī)生成多少個(gè)方塊
增加鼠標(biāo)點(diǎn)擊移動(dòng)繪畫
html
js庫(kù)
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")
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82722.html
摘要：一如何正確設(shè)置尺寸有兩種一種是屬性，一般稱其為畫布尺寸，即圖形繪制的地方。一般稱其為畫板尺寸，用于渲染繪制完成的圖形。二如何在高分辨率屏幕上清晰顯示圖形上面說(shuō)過(guò)，避免圖形變形失真，要保持畫布尺寸和畫板尺寸一致。 一、如何正確設(shè)置canvas尺寸？ Canvas有兩種width、height：1、一種是width、height屬性，一般稱其為畫布尺寸，即圖形繪制的地方。默認(rèn)值分別為300...
摘要：一如何正確設(shè)置尺寸有兩種一種是屬性，一般稱其為畫布尺寸，即圖形繪制的地方。一般稱其為畫板尺寸，用于渲染繪制完成的圖形。二如何在高分辨率屏幕上清晰顯示圖形上面說(shuō)過(guò)，避免圖形變形失真，要保持畫布尺寸和畫板尺寸一致。 一、如何正確設(shè)置canvas尺寸？ Canvas有兩種width、height：1、一種是width、height屬性，一般稱其為畫布尺寸，即圖形繪制的地方。默認(rèn)值分別為300...
摘要：前言初學(xué)，做了一個(gè)畫板應(yīng)用，地址點(diǎn)這里。本篇為的一些基礎(chǔ)思想和注意事項(xiàng)，不是基礎(chǔ)。主要是在于事件上的實(shí)踐經(jīng)驗(yàn)屏兼容屏?xí)褂枚鄠€(gè)物理像素渲染一個(gè)獨(dú)立像素，導(dǎo)致一倍圖在屏幕上模糊，也是這樣，所以我們應(yīng)該把畫布的大小設(shè)為元素大小的或倍。 前言 初學(xué)canvas，做了一個(gè)畫板應(yīng)用，地址點(diǎn)這里 。本篇為canvas的一些基礎(chǔ)思想和注意事項(xiàng)，不是基礎(chǔ)api。主要是在于touch事件上的實(shí)踐經(jīng)驗(yàn) r...
摘要：實(shí)現(xiàn)彩虹畫筆繪畫板指南作者簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。這部分不涉及內(nèi)容，全部由來(lái)實(shí)現(xiàn)。實(shí)現(xiàn)彩虹畫筆繪畫板效果圖項(xiàng)目源碼分析源碼獲取節(jié)點(diǎn)支持不支持彩虹效控制筆觸大小控制繪制路徑源碼分析寬高設(shè)置屬性筆觸的形狀，有圓平方三種。 Day08 - HTML5 Canvas 實(shí)現(xiàn)彩虹畫筆繪畫板指南 作者：?liyuechun 簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑...
閱讀 435·2019-08-29 12:44
閱讀 3013·2019-08-26 17:49
閱讀 2443·2019-08-26 13:40
閱讀 1189·2019-08-26 13:39
閱讀 3668·2019-08-26 11:59
閱讀 1830·2019-08-26 10:59
閱讀 2469·2019-08-23 18:33
閱讀 2698·2019-08-23 18:30
