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

Size: px

Start display at page:

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

さゆりしまむね
7 years ago
Views:

1 1

2 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 HTML5 HTML4 HTML5 Canvas jcanvas Canvas HTML JavaScript Web HTML Canvas JavaScript API( ) ( ) ( ) Canvas JavaScript jcanvas HTML5Canvas jquery Canvas API 2

3 jcanvas (Canvas ) jcanvas jcanvas var context = $("#canvas")[0].getcontext("2d");// 1. context.fillstyle="red";// context.strokestyle="black";// context.linewidth=2;// 2px context.arc(240, 120, 50, 0, 2 * Math.PI, true);// context.fill();// context.stroke();// 2. context.fillstyle="blue";// context.font="24px Arial";// context.textalign = "center";// context.textbaseline = "middle";// ( ) context.filltext("canvas ", 240, 280);// jcanvas $("#canvas").drawarc({ // 1. fillstyle: "red", // strokestyle: "black", // strokewidth: 2, // 2px x: 240, // x 240px y: 120, // y 120px radius: 50 // 50px }). drawtext({ // 2. fillstyle: "blue", // fontsize: 24, // 24px fontfamily: "Arial", // Arial x: 240, // x 240px y: 280, // y 120px text: "Canvas " // }); jcanvas jcanvas 3

4 jcanvas $("canvas")[0].width = $(window).width(); $("canvas")[0].height = $(window).height(); strokestyle: fillstyle: strokewidth: x: x y: y fillstyle strokestyle 1.3. jcanvas 1. 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}); 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: 4

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

6 2. Layer drawlayers ( ) drawlayers 0 addlayer (type:, width:, height: ) type: addlayertogroup (, ) animatelayer(, [, ] [, ] [, ] ) linear swing liner swing animatelayergroup( ) delaylayer( ) delaylayergroup( ) movelayer(, ) removelayer( ) removelayerfromgroup( ) removelayergroup( ) removelayers( ) setlayer( ) setlayergroup( ) setlayers( ) getlayer( ) getlayergroup( ) getlayerindex( ) getlayers( ) 6

7 stoplayer( ) stoplayergroup( ) seteventhooks(add:function(layer) ) click dblclick mousedown mouseup 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"}}); 7

8 ( ) $.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, 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( ) 8

9 createpattern( ) getcanvasimage( ) Base64 geteventhooks( ) measuretext( ) jcanvas.extend( ) 5. 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 9

10 crossorigin: drawimage canvas, anonymous, use-credentials draggroups: indegrees: true false intangible: true false 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 10

11 Web IT NPO Code.org NPO Code.org Infocomm Development Authority of Singapore(IDA) 2016 IT 1 IT IT TechAcademy IT NPO CANVAS 11

12 2.2.,, Web IT

13 1: 2: 3,4 3,4 3: 4: 5,6 5,6 PC 180 5: 6: 13

14 2.3. (20 ) (25 ) (5 ) CPU CPU CPU CPU CPU 14

15 2.4. 7: 8: 9: 10: 11: CPU ( 7) 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, 15

16 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");} } }}}); function den(){ sweetalert(" "); }; function dg(){ sweetalert(" "); }; :450, :150 if PC 180 " " " " 16

17 ( 8) 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"});}, 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");} 17

18 } }}}); function haad(){ sweetalert("hdd "); }; function dk(){ sweetalert("hdd "); }; :200, :40 if PC HD 180 "HDD " "HDD " ( 9) 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; obj.drawtext({ strokestyle:"black", fillstyle:"black", strokewidth:1, x:1500,y:500, fontsize:30, text:" ", name:"setsumei1"});}, 18

19 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 " " " " ( 10) obj.drawimage({ draggable: true, source: videocard.png, x:1100, y:50, 19

20 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 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(){ 20

21 sweetalert(" "); }; function vc(){ sweetalert(" "); }; :200, :20 if PC 180 " " " " CPU( 11) 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", 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){ 21

22 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 "

23 [1] :,,,. [2] :,,. 23

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