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);
}

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. html5 canvas 自定义画图裁剪图片

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

  4. Image1.Canvas画图笔刷

      如何背景透明       unit Unit1;interfaceuses  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Va ...

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

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

  6. ZBrush中的笔刷该怎样制作

    ZBrush给用户提供了许多的常用笔刷,我们可以使用这些笔刷自由地发挥创意.为了让雕刻速度更快,模型刻画更细致我们常常也会创建自定义笔刷,本文教您在ZBrush中制作笔刷. 查看更多内容请直接前往:h ...

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

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

  8. 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

    超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...

  9. Customize Acrylic Brush in UWP Applications(在UWP中自定义亚克力笔刷)

    原文 Customize Acrylic Brush in UWP Applications(在UWP中自定义亚克力笔刷) Windows 10 Fall Creators Update(Build ...

随机推荐

  1. Java使用QRCode.jar生成与解析二维码

    原文V:http://www.cnblogs.com/bigroc/p/7496995.html#3797682 正题:Java使用QRCode.jar生成与解析二维码demo 欢迎新手共勉,大神监督 ...

  2. dubbo学习之Hello world

    现在企业中使用dubbo的越来越多,今天就简单的学习一下dubbo,写了一个hello world,教程仅供入门,如要深入学习请上官网 服务提供方: 首先将提供方和消费方都引入jar包,如果使用的是m ...

  3. nodejs 模板字符串

    范例1: for (var i=0;i<10;i++){ var data = `公司名:${i}`; console.log(data) } 输出: 实例2: var name = '丁香医生 ...

  4. 笔记16 C# typeof() & GetType()

    C#中任何对象都具有GetType()方法,它的作用和typeof()相同,返回Type类型的当前对象的类型.typeof(x)中的x,必须是具体的类名.类型名称等,不可以是变量名称:GetType( ...

  5. leetcode第一刷_Symmetric Tree

    必须承认,一開始这道题我是不会做的.由于我心目中的树遍历仅仅能用一个节点发起.多么天真而无知. 我想不通如何同一时候遍历两颗子树.由于根节点一定是一个啊.但是,作为对称轴上的它.从一開始就不应该被考虑 ...

  6. git操作-如何把你的本地仓库放到GitHub已有仓库

    本地: 首先在你的本地git init 初始化一个仓库,然后git add . 将所有的文件都打包到仓库中,git -commit -m "first_commit" 此时是没有什 ...

  7. RabbitMQ的工作模式

    简单模式: # #########################基于简单模式的 生产者 ######################### #!/usr/bin/env python import ...

  8. kubectl技巧之通过jsonpath截取属性

    系列目录 前面一节我们介绍了使用go-template截取属性,go-template功能非常强大,可以定义变量,使用流程控制等,这是jsonpath所不具备的.然而,jsonpth使用的时候更为灵活 ...

  9. caffe学习--cifar10学习-ubuntu16.04-gtx650tiboost--1g--01

    引用了下文的资料,在此感谢! http://www.cnblogs.com/alexcai/p/5468164.html http://blog.csdn.net/garfielder007/arti ...

  10. TXT文本写入数据库

    load data local infile "D:/abc.txt" into table lee; leedabao.txt内容如下,中间用Tab隔开: 2 yuanpeng ...