原生js+canvas实现骰子作图

骰子作图"/>

原生js+canvas实现骰子作图

最终效果大家可以试一下：，上传图片后记得要点一下那个start（那个滑动条最好不要拉到最左边去了，虽然渲染出的最接近原图，但cpu不好的同学浏览器会卡死）。

其实这个个人小玩意早在几个月前就做好了,主要就是用大小不一的点(或其他)来重新绘制图片。

首先在一个闭包中进行初始化，并进行原生代码的封装

(function(doc){var concatImg = {init(){var getId = doc.getElementById.bind(doc)this.file = getId('uoploadImg')this.cas = getId('canvas')this.canvas = doc.createElement('canvas')this.ctx = this.cas.getContext('2d')this.ctx2 = this.canvas.getContext('2d')this.img = new Image()this.fr = new FileReader()this.range = getId('range')this.autoCalc = getId('autocalc')this.trigger = getId('start')this.colour = getId('colour')this.path = getId('pathinfo')this.selection = getId('selection')this.maxUnitPixel = +this.range.valuethis.unitPixelColor = this.colour.valuethis.isAutoCalc = this.autoCalc.checkedthis.selectionValue = this.selection.valuethis.pixelCollection =[...'1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+{}|:"<>?-=[]\\;\',./`~']this.pixelCollectionLen = this.pixelCollection.lengththis.drawDetail = this.primitiveDrawDetailthis.bindEvent.call(this)},
}
}(document)

这里是表单控制

<div class="row">
    <div class="col-lg-4">
        <div class="input-group">
            <section class="input-group-btn">
                <button class="btn btn-success" type="button" id="start">Start</button>
            </section>
            <input type="text" class="form-control" placeholder="name of the file:" id="pathinfo">
            <input type="file" id="uoploadImg" class="form-control" accept="image/*">
            <span class="input-group-addon">auto calculate：
                <input type="checkbox" aria-label="..." id="autocalc">
            </span>
        </div>
        <select id="selection" class="form-control">
            <option value="1">dot</option>
            <option value="2">character</option>
            <option value="3">brick</option>
        </select>
    </div>
    <div class="col-lg-2">
        long of side setting：