( )$("canvas").drawarc({strokestyle:"red", x:100, y:100, radius:20, start:0, end:360); drawline(x1:, y1:,... xn:, yn:) drawline n 2 n 3 x1: y1: xn: yn

Size: px

Start display at page:

Download "( )$("canvas").drawarc({strokestyle:"red", x:100, y:100, radius:20, start:0, end:360); drawline(x1:, y1:,... xn:, yn:) drawline n 2 n 3 x1: y1: xn: yn"

いつやうとだ
5 years ago
Views:

1 0.1. jquaery jcanvas jquery John Resig OSS JavaScript Web JavaScript jquery jquery jcanvas jcanvas 0.3. jcanvas HTML5 Canvas Canvas jcanvas jcanvas jquery Canvas API jcanvas Grouping Layer jcanvas $("canvas")[0].width = $(window).width(); $("canvas")[0].height = $(window).height(); strokestyle: fillstyle: strokewidth: x: x y: y fillstyle strokestyle 1. drawarc(x:, y, radius:, start:, end:) drawarc : : radius start: end: 1

2 ( )$("canvas").drawarc({strokestyle:"red", x:100, y:100, radius:20, start:0, end:360); drawline(x1:, y1:,... xn:, yn:) drawline n 2 n 3 x1: y1: xn: yn: rounded:ture strokedash:[ ] startarrow:, endallow: ture arrowangle:, arrowradius: ( )$("canvas").drawline({strokestyle: blue, endarrow:true, arrowradius:20, x1:10, y1:20, x2:50, y2:100, x3:70, y3:40); drawrect(x:, y:, width:, height:) drawrect x: y: width: height: cornerradius: ( )$("canvas").drawrect({fillstyle: red, x:300, y:140, width:300, height:150); drawpolygon(x:, y:, radius:, sides:, (rotate:)) drawpolygon x: y: radius: sides: rotate: concavity: ( )$("canvas").obj.drawpolygon({fillstyle: green, x:50, y:100, radius:30, sides:3, concavity:0.5); drawtext(x:, y:, fontstyle:, fontsize:, text: ) drawtext fontstyle: fontsize: text: align center, left, right start x,y end x,y baseline middle, top, hanging, alphabetic, ideographic, bottom fliparctext: true fontfamily: ( )$("canvas").drawtext({strokestyle: blue, strokewidth:1, x:150, y:30, fontsize:20, text: ); drawimage(source:, x:, y:) drawimage source: : : HTML width: height: scale: swidth: sheight: sx: sy: cropfromcenter: ( )$( canvas ).drawimage({source: images/fish.jpg, x: 150, y: 150); drawquadratic(x1:, y1:, cx1:, cy1:, x2:, y2:) drawquadratic 2 x1: y1: 2 cx1: cy1: 2 x2: y2: 2 2

3 ( )$("canvas").drawquadratic({strokestyle: black, x1:70, y1:150, cx1:200, cy1:20, x2:350, y2:100) drawbezier(x1:, y1:, cx1:,cy1:, cx2:, cy2:, x2:, y2:, cx3:, cy3:, cx4:, cy4:, x3:, y3:[,...]) drawbezie x1: y1: x2: y2: x3: y3: cx1: xy1: cx2: cy2: cx3: cy3: cx4: cy4: ( )$("canvas").drawbezier({strokestyle: black, x1:10, y1:10, cx1:30,cy1:30, cx2:70, cy2:70, x2:120, y2:120, cx3:140, cy3:140, cx4:180, cy4:180, x3:210, y3:210) drawellipse(x:, y:, width:, height:) drawellipse x: y: width: height: ( )$("canvas").drawellipse({fillstyle: red x:150, y:100, width:200, height:100); drawslice(x:, y:, radius:, start:, end:) drawslice x: y: radius: start: end spread:(0 1) ( )$("canvas").drawslice({fillstyle:blue, start:60, end:120, x:100, y:100, radius:150, spread:1/40); drawpath(p1:type:,( ),p2:type:,,...) drawpath type line vector quadratic arc ( )$("canvas").drawpath({strokestyle: #000,strokeWidth: 4, p1: {type: line, x1:200, y1:50,x2:100, y2:150,x3:200, y3:150,x4:120, y4:200, p2: {type: quadratic, cx1:175, cy1:250,x2:225, y2:200); 2. Layer drawlayers ( ) drawlayers 0 addlayer (type:, width:, height: ) type: addlayertogroup (, ) animatelayer(, [, ] [, ] [, ] ) linear swing liner swing animatelayergroup( ) 3

4 delaylayer( ) delaylayergroup( ) movelayer(, ) removelayer( ) removelayerfromgroup( ) removelayergroup( ) removelayers( ) setlayer( ) setlayergroup( ) setlayers( ) getlayer( ) getlayergroup( ) getlayerindex( ) getlayers( ) stoplayer( ) stoplayergroup( ) seteventhooks(add:function(layer) ) click dblclick mousedown mouseup 4

5 mousemove mouseover canvas mouseout canvas dragstart drag dragstop dragcancel canvas ( )dragstart, drag, dragstop, dblclick $("canvas").drawarc({layer: true,draggable: true, bringtofront: true,fillstyle: "green", x: 150, y: 150,radius: 50, dragstart: function() {layer.fillstyle="blue", drag: function(layer) {layer.fillstyle="red", dragstop: function(layer) {layer.fillstyle="yellow", dblclick:function(layer){layer.fillstyle="black" ); ( ) $.jcanvas.defaults.layer = true; $("canvas").drawarc({ fillstyle: blue,x: 150, y: 150,radius: 50,draggable:true, name:"rei",drag:function(){$("canvas").removelayer("link");drawlink();); function drawlink(){ var ai = obj.getlayer("rei"); $("canvas").drawrect({ fillstyle: red, x:ai.x+100, y:ai.y+100, width: 100, height: 100,draggable: false,name:"link"); drawlink(); ( ) $.jcanvas.defaults.layer = true; obj.drawline({ strokestyle: "black", strokewidth: 1, x1:10, y1:200, x2:200, y2:30, x3:390, y3:200, draggable: false, name: "link" ); obj.drawarc({fillstyle: "blue", radius:6, x:200, y:30, draggable:true, 5

6 name:"vertex", drag:function(layer){ var sen=obj.getlayer("link"); sen.x2=layer.x; sen.y2=layer.y; ); 3. clearcanvas() rotatecanvas(x:, y:, rotate: ) x: y: rotate: scalecanvas(x:, y:, scalex:, scaley: ) x: y: scalex: scaley: scalecanvas(scale:2).drawrect translatecanvas(translate:) translate: translatey: detectpixelratio(function(ratio)ratio ) restorecanvas( ) getcanvasimage ( ) Base64 PNG, jpg JPEG setpixels( ) 4. creategradient( ) createpattern( ) getcanvasimage( ) Base64 geteventhooks( ) measuretext( ) jcanvas.extend( ) 5. shadowblur:

7 shadowcolor: shadowstroke: shadowx:, shadowy: x y scalex:, scaley: x y canvas opacity: bringtofront: ture false restrictdragtoaxis: x y null disableevents: ture false intangible: ture false visible: ture false autsave: ture false crossorigin: drawimage canvas, anonymous, use-credentials draggroups: indegrees: true false intangible: true false maxwidth: drawtext r1:,r2: null r1 r2 7

8 respectalign: drawtext true x y false x y translatex:,translatey: translatex translatey strokejoin: miter bevel round miterlimit: miter imagesmoothing: ture false compositing: source-over, source-in, source-out, source-atop, lighter, destination-over, destination-in, destination-out, destination-atop, copy, xor, mask: ture ccw: ture false intersects: ture false

9 0.6. (20 ) (25 ) CPU CPU CPU CPU (5 ) PC obj.drawimage({ draggable: true, 9

10 source: dengen.jpg, x:50, y:70, width: 100, height: 100, fromcenter: false, rotate:180, dblclick:function(layer){ layer.width=400*yoko/1680; layer.height=150*yoko/1680; obj.drawtext({ strokestyle:"black", fillstyle:"black", strokewidth:1, x:210,y:20, fontsize:30, text:"", name:"setsumei4");, dragstart:function(layer){omx=layer.eventx;omy=layer.eventy;, drag:function(layer) {kaki(layer);, dragstop:function(layer){ if(-40<=layer.rotate && layer.rotate<=40){ layer.rotate=0;; if(yoko*50/1680<=layer.y<yoko*781/1680 && yoko*476/1680<=layer.x<=yoko*1245/1680){ //pc if(yoko*595/1680<=layer.y<yoko*748/1680 && yoko*511/1680<=layer.x<=yoko*911/1680){ // if(-10<=layer.rotate%360 && layer.rotate%360<=10){ if(layer.width==400*yoko/1680 && layer.height==150*yoko/1680){ // den(); if(layer.rotate%180){ dg(); else{ obj.removelayer("eo"); ); 10

11 function den(){ sweetalert(" "); ; function dg(){ sweetalert(" "); ; :450, :150 if PC 180 " " " " obj.drawimage({ draggable: true, source: hd.jpg, x:10, y:400, width: 150, height:150, fromcenter: false, rotate:180, dblclick:function(layer){ layer.width=170*yoko/1680; layer.height=50*yoko/1680; obj.drawtext({ strokestyle:"black", fillstyle:"black", strokewidth:1, x:240,y:500, fontsize:30, text:"hdd ", name:"setsumei5");, 11

12 dragstart:function(layer){omx=layer.eventx;omy=layer.eventy;, drag:function(layer) {kaki(layer);, dragstop:function(layer){ if(-40<=layer.rotate && layer.rotate<=40){ layer.rotate=0;; if(yoko/2 && tate/2){ //pc if(yoko*1059/1680&&tate*554/873){ //HDD if(-10<=layer.rotate%360 && layer.rotate%360<=10){ if(layer.width==170*yoko/1680 && layer.height==50*yoko/1680){ haad(); if(layer.rotate%180){ dk(); // else{ obj.removelayer("eo"); ); function haad(){ sweetalert("hdd "); ; function dk(){ sweetalert("hdd "); ; :200, :40 if PC HD 180 "HDD " "HDD " obj.drawimage({ draggable: true, source: memori01.jpg, x:1100, y:350, width: 70, height: 330, 12

13 fromcenter: false, rotate:180, dblclick:function(layer){ layer.width=20*yoko/1680; layer.height=300*yoko/1680; obj.drawtext({ strokestyle:"black", fillstyle:"black", strokewidth:1, x:1500,y:500, fontsize:30, text:" ", name:"setsumei1");, dragstart:function(layer){omx=layer.eventx;omy=layer.eventy;, drag:function(layer) {kaki(layer);, dragstop:function(layer){ if(-40<=layer.rotate && layer.rotate<=40){ layer.rotate=0;; if(yoko/2 && tate/2){ //pc if(yoko*817/1680&&tate*280/873){ // if(-10<=layer.rotate%360 && layer.rotate%360<=10){ if(layer.width==20*yoko/1680 && layer.height==300*yoko/1680){ aiu(); if(layer.rotate%180){ mm(); // else{ obj.removelayer("eo"); ); function aiu(){ sweetalert(" "); ; function mm(){ 13

14 sweetalert(" "); ; :20, :330 if PC 180 " " " " obj.drawimage({ draggable: true, source: videocard.png, x:1100, y:50, width: 500, height:140, fromcenter: false, rotate:180, dblclick:function(layer){ layer.width=200*yoko/1680; layer.height=20*yoko/1680; obj.drawtext({ strokestyle:"black", fillstyle:"black", strokewidth:1, x:1470,y:150, fontsize:30, text:" ", name:"setsumei2");, dragstart:function(layer){omx=layer.eventx;omy=layer.eventy;, drag:function(layer) {kaki(layer);, dragstop:function(layer){ if(-40<=layer.rotate && layer.rotate<=40){ layer.rotate=0;; 14

15 if(yoko/2 && tate/2){ //pc if(yoko*691/1680&&tate*434/873){ // if(-10<=layer.rotate%360 && layer.rotate%360<=10){ if(layer.width==200*yoko/1680 && layer.height==20*yoko/1680){ aii(); if(layer.rotate%180){ vc(); // else{ obj.removelayer("iueo"); ); function aii(){ sweetalert(" "); ; function vc(){ sweetalert(" "); ; :200, :20 if PC 180 " " " " CPU obj.drawimage({ draggable: true, source: cpu01.jpg, x:1100, y:230, width:100*yoko/1680, height:110*yoko/1680, fromcenter: false, rotate:180, name:"kakudo", 15

16 dblclick:function(layer){ obj.drawtext({ strokestyle:"black", fillstyle:"black", strokewidth:1, x:1550,y:260, fontsize:30, text:"cpu ", name:"setsumei3");, dragstart:function(layer){omx=layer.eventx;omy=layer.eventy;obj.removelayer("setsumei");, drag: function(layer) {kaki(layer);, dragstop:function(layer){ if(-40<=layer.rotate && layer.rotate<=40){ layer.rotate=0;; if(yoko/2 && tate/2){ //pc if(100*yoko/168&&110*yoko/168){ //cpu if(-10<=layer.rotate%360 && layer.rotate%360<=10){ ai(); if(layer.rotate%180){ cp(); else{ obj.removelayer("ueo"); ); CPU if PC CPU 180 "CPU " "CPU " 16

17 0.9. [1] :,,,. [2] :,,. 17

1.1. jquery 1 jquery jcanvas javascript jquery JavaScript jquery $() JavaScript JavaScript jquery Googlr Chrome Eddge(Enternet Explorer) Web Web jquer

1 1.1. jquery 1 jquery jcanvas javascript jquery JavaScript jquery $() JavaScript JavaScript jquery Googlr Chrome Eddge(Enternet Explorer) Web Web jquery jcanvas jquery jcanvas 1.2. jcanvas HTML5 Canvas