canvas涂鸦板

作者: AdrianRD | 来源:发表于2016-10-13 16:17 被阅读105次

  • 基于canvas的涂鸦板
  • 可设置画笔颜色
  • 可设置画笔宽度
  • 可撤销画笔动作
  • 兼容PC和移动端

下载完整demo


使用示例


html

<div class="boardBox" id="box"></div>

js

borad = new A_DoodleBoard('box');
borad.init();

css

.boardBox{
     width: 100%;
     height: 500px;
     border:2px solid #6699cc;
}

方法


init()

初始化

setColor(string)

设置画笔颜色
参数为颜色代码或颜色字符串

setWidth(number)

设置画笔宽度
参数为数字

clear()

清空画布

step_previous()

返回上一步

step_next()

下一步

demo截图


canvas涂鸦板

相关文章

  • canvas涂鸦板

    基于canvas的涂鸦板 可设置画笔颜色 可设置画笔宽度 可撤销画笔动作 兼容PC和移动端 下载完整demo 使用...

  • canvas实现的简易涂鸦板效果

    用canvas实现的简易涂鸦板效果,用鼠标点击在画布上随意涂鸦 涂鸦 *{margin: 0;padding: ...

  • 涂鸦板

    小编使用的是DrawingBoard支付开源库 戳这里☞ 传送门 Gradler配置 在xml中引用 java中 ...

  • iOS涂鸦板

    想要实现一个签字板的效果,比如这样: 1、定义一个数组,记录手指路径,数组的一个元素标志一条曲线。每个元素包含:手...

  • android随笔之自定义View的Canvas用法

    对Canvas进行操作: 1,Canvas平移 2,Canvas缩放 3,Canvas旋转 Canvas操作例子 ...

  • HTML5中canvas使用

    1、Canvas基础 2、Canvas画直线 3、Canvas画矩形 4、Canvas画文字 5、Canvas画圆...

  • 【微信小程序】canvas is empty

    问题:使用canvas时,报错:canvas is empty原因:因为创建canvas对象时,canvas还未加...

  • canvas

    @(HTML5)[canvas与SVG] [TOC] 十 、canvas canvas的基本用法 canvas是H...

  • canvas

    canvas canvas绘制 获取元素var canvas = document.getelementbyid(...

  • 2D学习之Bitmap

    Canvas canvas =new Canvas(); Paint paint =new Paint(); ca...

网友评论

    本文标题:canvas涂鸦板

    本文链接:https://www.haomeiwen.com/subject/fhwwyttx.html