1.
[Image]Qq20120715095110.png
?
? 2. Code [HTML] Code
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<TITLE>HTML5 Canvas-Custom Brushes </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>
<body>
<div class= "Container" >
<div class= "Column1" >
<canvas id= "Color" width= "height=" ></canvas>
</div>
<div class= "Column2" >
<div> Color Preview:</div>
<div id= "Preview" ></div>
<div id= "Pick" ></div>
</div>
<div ></div>
</div>
<canvas id= "Panel" width= "height=" ></canvas>
</body>
3. [Code][javascript] Code
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 background
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 > | | 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 (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 Custom Brushes
