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

Size: px

Start display at page:

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

ほのかひでやま
7 years ago
Views:

1 1

2 1.1. jquery 1 jquery jcanvas jquery javascript jquery JavaScript jquery $() JavaScript JavaScript jquery Googlr Chrome Eddge(Enternet Explorer) Web jquery jcanvas jquery jcanvas (jquery ) <html> <head> <script src=" <script> $(function(){ $("#test").html("hello World!") }); </script> <head> <body> <div id="test"></div> </body> </html> 1.2. jcanvas jcanvas jquery HTML5 Canvas Canvas HTML JavaScript Web HTML HTML HTML HTML HyperText Markup Language Web WWW Web W3C(World Wide Web Consortium) 2

3 Web HTML HTML < > OS HTML HTML4 Netscape Internet Explorer web web web web W3C HTML4.0 HTML4.0 HTML4.01 W3C HTML 4.0 HTML 4.01 HTML 4 HTML Web HTML HTML HTML HTML 4.01 HTML HTML5 HTML5 HTML4 HTML5 HTML5 HTML5 OPERA Internet Explorer7 Internet Explorer8 video img canvas JavaScript font CSS HTML5 3

4 Canvas Canvas HTML5 Canvas JavaScript API( ) ( ) ( ) Canvas Canvas jcanvas HTML5Canvas jquery Canvas API jcanvas (Canvas ) jcanvas jcanvas (Canvas ) onload = function() { draw(); }; function draw() { var canvas = document.getelementbyid( c1 ); if (! canvas! canvas.getcontext ) { return false; } var ctx = canvas.getcontext( 2d ); /* #1 */ ctx.beginpath(); ctx.fillstyle = red ; // ctx.arc(70, 45, 35, 0, Math.PI*2, false); ctx.fill(); /* #2 */ ctx.beginpath(); ctx.fillstyle = green ; // ctx.arc(45, 95, 35, 0, Math.PI*2, false); ctx.fill(); /* #3 */ ctx.beginpath(); ctx.fillstyle = blue ; // ctx.arc(95, 95, 35, 0, Math.PI*2, false); ctx.fill(); } jcanvas $("#canvas").drawarc({ fillstyle: "red", // 4

strokestyle: "black", strokewidth: 2, x: 100, y: 100, radius: 50 }). $("#canvas").drawarc({ fillstyle: "green", strokestyle: "black", strokewidth: 2, x: 300, y: 300, radius: 50 }). $("#canvas").drawarc({ fillstyle: "blue", strokestyle: "black", strokewidth: 2, x: 500, y: 500, radius: 50 }).

5 strokestyle: "black", strokewidth: 2, x: 100, y: 100, radius: 50 }). $("#canvas").drawarc({ fillstyle: "green", strokestyle: "black", strokewidth: 2, x: 300, y: 300, radius: 50 }). $("#canvas").drawarc({ fillstyle: "blue", strokestyle: "black", strokewidth: 2, x: 500, y: 500, radius: 50 }). // // Canvas Canvas Canvas Canvas jcanvas Canvas jcanvas jcanvas jcanvas jcanvas jcanvas 5

6 Download jcanvas jcanvas.js jcanvas.min.js min HTML HTML <!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <script src="jquery min.js" type="text/javascript"></script> <script src="jcanvas.min.js" type="text/javascript"></script> </head><body><canvas></canvas> <script language="javascript"> // </script> </body></html> jcanvas jcanvas $("canvas")[0].width = $(window).width(); $("canvas")[0].height = $(window).height(); strokestyle: fillstyle: strokewidth: x: x y: y fillstyle strokestyle 1.3. jcanvas drawarc(x:, y, radius:, start:, end:) drawarc : : radius start: end: ( )$("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}); 6

7 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 ( )$("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: 7

8 ( )$("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}}); Layer drawlayers ( ) drawlayers 0 addlayer (type:, width:, height: ) type: addlayertogroup (, ) animatelayer(, [, ] [, ] [, ] ) linear swing liner swing animatelayergroup( ) delaylayer( ) delaylayergroup( ) 8

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

10 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({ 10

11 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, name:"vertex", drag:function(layer){ var sen=obj.getlayer("link"); sen.x2=layer.x; sen.y2=layer.y; }}); 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( ) creategradient( ) createpattern( ) getcanvasimage( ) Base64 geteventhooks( ) measuretext( ) jcanvas.extend( ) 11

12 shadowblur: 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 12

13 maxwidth: drawtext r1:,r2: null r1 r2 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 13

14 Web IT IT 2.2. web web web

15 2. 3. web jcanvas CPU CPU 15

16 16

18 PC 18

19 PC PC

21 (20 ) (25 ) (5 ) CPU CPU CPU CPU CPU 21

2.5. 5 2.5.1. obj.drawimage({ draggable: true, source: dengen.jpg, x:50, y:70, width: 100, height: 100, fromcenter: false, rotate:180, dblclick:function(layer){ layer.width=400*yoko/1680; layer.

22 obj.drawimage({ draggable: true, 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){ if(yoko*595/1680<=layer.y<yoko*748/1680 && yoko*511/1680<=layer.x<=yoko*911/1680){ //pc // 22

23 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");} } }}}); 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, 23

24 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"});}, 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 "); }; 24

function dk(){ sweetalert("hdd "); }; :200, :40 if -40 40 0 PC HD 180 "HDD " "HDD " 2.5.3. obj.drawimage({ draggable: true, source: memori01.

25 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, fromcenter: false, rotate:180, dblclick:function(layer){ layer.width=20*yoko/1680; layer.height=300*yoko/1680; 25

26 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(){ sweetalert(" "); }; :20, :330 if PC 180 " " " " 26

27 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;}; if(yoko/2 && tate/2){ //pc 27

28 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({ 28

29 draggable: true, source: cpu01.jpg, x:1100, y:230, width:100*yoko/1680, height:110*yoko/1680, fromcenter: false, rotate:180, name:"kakudo", 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

30 "CPU " "CPU " 2.6. CPU CPU [1] :,,,. [2] :,,. [3] [4] [5] [6] [7] 30

( )$("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

( )$(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 0.1. jquaery jcanvas jquery John Resig OSS JavaScript Web JavaScript jquery jquery 1 0.2. jcanvas jcanvas 0.3. jcanvas HTML5 Canvas Canvas jcanvas jcanvas jquery Canvas API jcanvas Grouping Layer jcanvas