1. [图片] QQ截图20120715095110.png


​
​2. [代码][HTML]代码

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 canvas - 自定义笔刷</title>
      <style>
      .container {
          color: #000;
          margin: 20px auto;
          overflow: hidden;
          position: relative;
          width: 800px;
      }
       
      /* custom styles */
      .column1 {
          float:left;
          width:500px;
      }
      .column2 {
          float:left;
          padding-left:20px;
          width:170px;
      }
      #panel {
          border:1px #000 solid;
          box-shadow:4px 6px 6px #444444;
          cursor:crosshair;
          display:block;
          margin:0 auto;
          height:600px;
          width:1000px;
      }
      #color {
          border:1px #000 solid;
          box-shadow:0px 4px 6px #444444;
          cursor:crosshair;
      }
      .column2 > div {
          margin-bottom:10px;
      }
      #preview, #pick {
          background-color:rgb(0, 195, 135);
          border:1px #000 solid;
          box-shadow:2px 3px 3px #444444;
          height:40px;
          width:80px;
       
          border-radius:3px;
          -moz-border-radius:3px;
          -webkit-border-radius:3px;
      }
 
      </style>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  </head>
    <body>
 
        <div class="container">
            <div class="column1">
                <canvas id="color" width="500" height="128"></canvas>
            </div>
            <div class="column2">
                <div>颜色预览:</div>
                <div id="preview"></div>
                <div id="pick"></div>
            </div>
            <div ></div>
        </div>
        <canvas id="panel" width="1000" height="600"></canvas>
    </body>
</html>
3. [代码][JavaScript]代码

var canvas;
var canvasColor;
var ctx;
var ctxColor;
var bMouseDown = false;
var selColorR = 0;
var selColorG = 195;
var selColorB = 135;
 
var BubbleBrush = {
    // inner variables
    iPrevX : 0,
    iPrevY : 0,
 
    // initialization function
    init: function () {
        ctx.globalCompositeOperation = 'source-over'; //'lighter' is nice too
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)';
        ctx.lineWidth = 2;
    },
 
    startCurve: function (x, y) {
        this.iPrevX = x;
        this.iPrevY = y;
        ctx.fillStyle = 'rgba(' + selColorR + ', ' + selColorG + ', ' + selColorB + ', 0.9)';
    },http://www.huiyi8.com/qzone/​
 
    draw: function (x, y) {qq背景
        var iXAbs = Math.abs(x - this.iPrevX);
        var iYAbs = Math.abs(y - this.iPrevY);
        iXAbs = (iXAbs > 30) ? 30 : iXAbs;
        iYAbs = (iYAbs > 30) ? 30 : iYAbs;
 
        if (iXAbs > 10 || iYAbs > 10) {
            ctx.beginPath();
            ctx.arc(this.iPrevX, this.iPrevY, (iXAbs + iYAbs) * 0.5, 0, Math.PI*2, false);
            ctx.fill();
            ctx.stroke();
            this.iPrevX = x;
            this.iPrevY = y;
        }
    }
};
 
$(function(){
    // creating canvas objects
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');
 
    canvasColor = document.getElementById('color');
    ctxColor = canvasColor.getContext('2d');
 
    drawGradients(ctxColor);
 
    BubbleBrush.init();
 
    $('#color').mousemove(function(e) { // mouse move handler
        var canvasOffset = $(canvasColor).offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);
 
        var imageData = ctxColor.getImageData(canvasX, canvasY, 1, 1);
        var pixel = imageData.data;
 
        var pixelColor = 'rgba('+pixel[0]+', '+pixel[1]+', '+pixel[2]+', '+pixel[3]+')';
        $('#preview').css('backgroundColor', pixelColor);
    });
 
    $('#color').click(function(e) { // mouse click handler
        var canvasOffset = $(canvasColor).offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);
 
        var imageData = ctxColor.getImageData(canvasX, canvasY, 1, 1);
        var pixel = imageData.data;
 
        var pixelColor = 'rgba('+pixel[0]+', '+pixel[1]+', '+pixel[2]+', '+pixel[3]+')';
        $('#pick').css('backgroundColor', pixelColor);
 
        selColorR = pixel[0];
        selColorG = pixel[1];
        selColorB = pixel[2];
    }); 
 
    $('#panel').mousedown(function(e) { // mouse down handler
        bMouseDown = true;
        var canvasOffset = $(canvas).offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);
 
        BubbleBrush.startCurve(canvasX, canvasY, false, false, false, false, false, false, canvasX, canvasY, 0, 0);
    });
    $('#panel').mouseup(function(e) { // mouse up handler
        bMouseDown = false;
    });
    $('#panel').mousemove(function(e) { // mouse move handler
        if (bMouseDown) {
            var canvasOffset = $(canvas).offset();
            var canvasX = Math.floor(e.pageX - canvasOffset.left);
            var canvasY = Math.floor(e.pageY - canvasOffset.top);
 
            BubbleBrush.draw(canvasX, canvasY, false, false, false, false, false, false, canvasX, canvasY, 0, 0);
        }
    });
});
 
function drawGradients() {
    var grad = ctxColor.createLinearGradient(20, 0, canvasColor.width - 20, 0);
    grad.addColorStop(0, 'red');
    grad.addColorStop(1 / 6, 'orange');
    grad.addColorStop(2 / 6, 'yellow');
    grad.addColorStop(3 / 6, 'green');
    grad.addColorStop(4 / 6, 'aqua');
    grad.addColorStop(5 / 6, 'blue');
    grad.addColorStop(1, 'purple');
    ctxColor.fillStyle=grad;
    ctxColor.fillRect(0, 0, canvasColor.width, canvasColor.height);
}

转载于:https://www.cnblogs.com/xkzy/p/3939920.html

HTML5 Canvas 自定义笔刷相关推荐

  1. HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)

    HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...

  2. ZBrush 4R7中自定义笔刷

    为了便于雕刻,ZBrush®很人性化地设计了自定义笔刷.随着ZBrush软件版本不断更新,功能也在不断完善.只是在笔刷面板ZBrush软件就为用户提供了上百种之多,如果我们想要用某种笔刷,一个个找起来 ...

  3. 【ZBrush教程】如何自定义笔刷快捷栏

    ZBrush 我们在雕刻的过程中总是花费很多时间去找笔刷,而笔刷界面中的笔刷非常的多,找起来费时又费力 zbrush很人性化的给用户提供了自定义笔刷界面的功能,便于我们能用快捷键进行操作,提高操作速度 ...

  4. ZBrush自定义笔刷

    1)首先做一个你想要的形状(我这里随便做了一个),然后在笔刷栏里选择从网格创建笔刷 2)此时我们创建的笔刷已经生成好了.我们再把笔刷调成DragRect(拖拽). 3)创建一个正方形,试一试我们的笔刷 ...

  5. html5 canvas 自定义画图裁剪图片

    html5 给我们带来了极大惊喜的canvas标签,有了它我们可以在浏览器客户端处理图片,不需要经过服务器周转.可以实现: 1.照片本地处理,ps有的一些基本功能都有 2.结合js可以实现一些很炫的动 ...

  6. 在CorelDRAW中的自定义彩虹笔刷创建迷幻背景

    在60年代的艺术形式中,迷幻艺术对设计和图形艺术的影响尤为重要.在下面这个CorelDRAW教程中我们主要使用图形纸工具和艺术笔工具创建一个迷幻风格的背景,在这之前我们需要先创建出一个彩虹笔刷. 1. ...

  7. 微信 html5 识别手写签名,html5 canvas做手写签名,该如何解决

    html5 canvas做手写签名 我用HTML5做了一个手写签名,运行在手机浏览器上,但是画出来效果总是很粗糙,曲线不够平滑,想找大侠指教 HTML> PhoneGap 浏览器不支持canva ...

  8. zbrush常用笔刷_教您在ZBrush中制作笔刷

    ZBrush®给用户提供了许多的常用笔刷,我们可以使用这些笔刷自由地发挥创意.为了让雕刻速度更快,模型刻画更细致我们常常也会创建自定义笔刷,本文教您在ZBrush中制作笔刷. 步骤一 在Tool工具下 ...

  9. ZBrush 4R7中为笔刷设置快捷键

    为了便于雕刻.提高雕刻速度,ZBrush®不仅很人性化地设计了自定义笔刷,用户还可以自行设置笔刷快捷键,步骤如下. ZBrush 4R8下载:http://wm.makeding.com/iclk/? ...

最新文章

  1. 关于angularjs dom渲染结束再执行的问题
  2. Puppeteer设置浏览器代理的三种思路
  3. ASP.NET MVC+Spring.net+Nhibernate+EasyUI+Jquery开发案例(1)
  4. zemax微透镜阵列示例_阵列反向！ Ruby中的示例方法
  5. c# mysql app.config_60. C# -- 读取 appconfig文件配置数据库连接的方法
  6. 2018java最新面试题
  7. element 方法返回的boolean被当成字符串了_JavaScript 原生对象、属性、方法、事件、事件参数...
  8. c++以空格分开的输入数组_技术贴，MATLAB矩阵与数组汇总讲解！
  9. 如果全世界人口压缩到100人
  10. 合并压缩JavaScript，开发发布两不误
  11. 产品经理做产品设计的九步法
  12. Linux怎么删掉ftp服务器,Linux怎么删掉ftp服务器
  13. php多进程结合Linux利器split命令实现把大文件分批高效处理
  14. Nvidia 的新显卡架构 Maxwell 性能相比开普勒提升了多少？
  15. DEAP2.1 使用方法(运筹学)
  16. FreeSql 导航属性的联级保存功能
  17. qq相册回收站复原显示服务器繁忙,qq回收站里恢复的照片在哪看 qq照片回收站还原照片路径地址...
  18. 医院计算机人员考试试题,医院信息科考试试题及答案-
  19. MATLAB显示slic，quickshift超像素分割结果图
  20. NIST发布四种抗量子密码算法

热门文章

  1. 内存的静态分配和动态分配的区别【转】
  2. CF-1249 F.Maximum Weight Subset(贪心)
  3. Aizu 2224 Save your cats
  4. Redis设计于实现之字典
  5. 实现strstr库函数功能
  6. mysql 的 外连查询
  7. C++11： std::function＜void()＞ func
  8. [BUUCTF-pwn]——mrctf2020_shellcode
  9. OSGi Bundle之Hello World
  10. let finger cross