1.1. jquery 1 jquery jcanvas jquery JavaScript jquery 1. / jquery Googlr Chrome Eddge(Enternet Explorer) 2. jquery JavaScript HTML div JS jqu

Size: px

Start display at page:

Download "1.1. jquery 1 jquery jcanvas jquery JavaScript jquery 1. / jquery Googlr Chrome Eddge(Enternet Explorer) 2. jquery JavaScript HTML div JS jqu"

めぐのきせんばる
5 years ago
Views:

1 1

2 1.1. jquery 1 jquery jcanvas jquery JavaScript jquery 1. / jquery Googlr Chrome Eddge(Enternet Explorer) 2. jquery JavaScript HTML div JS jquery! div <div id="test" class="sample sample-test">... </div> ID test div sample sample-test // JavaScript (jquery ) var target = document.getelementbyid( test ) console.log(target.getattribute( class )); // jquery console.log($( #test ).attr( class )); 3. jquery ( ) jquery jcanvas jquery 4. / UI ( UI) jquery / jquery Mobile UI jquery Mobile jquery Mobile jquery jquery jquery Mobile jquery Mobile jquery jquery UI JavaScript jquery Mobile HTML5 UI 5. JavaScript KB MB jquery KB 2

3 6. (Ajax) Ajax(Asynchronous JavaScript+XML) jquery jquery Hello World! Hello World! $("#test").html("hello World!") $("#test") id test.html( Hello World! ) <html> <head> <script src=" <script> $(function(){ $("#test").html("hello World!") }); </script> <head> <body> <div id="test"></div> </body> </html> jqueary JavaScript HTML JavaScript JavaScript Web Web Web JavaScript Web HTML Web JavaScript HTML5 1. JavaScript 2. JavaScript HTML HTML 3. JavaScript 3

4 4. JavaScript HTML5 HTML5 HTML 5 W3C HTML HTML5 HTML HTML5 1. API API 2. HTML Web Web 3. HTML img video audio 4. Internet Explorer7 Internet Explorer8 IE8 HTML5 IE8 HTML jcanvas jcanvas jquery HTML5 Canvas Canvas HTML JavaScript Web HTML Canvas Canvas HTML5 Canvas JavaScript API( ) ( ) 4

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

6 jcanvas $("canvas").drawarc({ fillstyle: "red", strokewidth: 2, x: 150, y: 100, radius: 50 }); $("canvas").drawarc({ fillstyle: "green", strokewidth: 2, x: 110, y: 160, radius: 50 }); $("canvas").drawarc({ fillstyle: "blue", strokewidth: 2, x: 190, y: 160, radius: 50 }); // // // 6

Canvas Canvas Canvas Canvas jcanvas Canvas jcanvas jcanvas jcanvas 1.2.2. jcanvas jcanvas http://projects.calebevans.me/jcanvas/ Download jcanvas jcanvas.js jcanvas.min.js min HTML 1.2.3. HTML <!

7 Canvas Canvas Canvas Canvas jcanvas Canvas jcanvas jcanvas jcanvas jcanvas jcanvas 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> 7

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

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

10 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( ) movelayer(, ) removelayer( ) removelayerfromgroup( ) removelayergroup( ) removelayers( ) setlayer( ) setlayergroup( ) setlayers( ) 10

11 getlayer( ) getlayergroup( ) getlayerindex( ) getlayers( ) stoplayer( ) stoplayergroup( ) seteventhooks(add:function(layer) ) jcanvas click dblclick mousedown mouseup mousemove mouseover canvas mouseout canvas dragstart drag dragstop dragcancel canvas 11

12 ( )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, 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 12

13 translatecanvas(translate:) translate: translatey: detectpixelratio(function(ratio)ratio ) restorecanvas( ) getcanvasimage ( ) Base64 PNG, jpg JPEG setpixels( ) creategradient( ) createpattern( ) getcanvasimage( ) Base64 geteventhooks( ) measuretext( ) jcanvas.extend( ) shadowblur: shadowcolor: shadowstroke: shadowx:, shadowy: x y scalex:, scaley: x y canvas opacity:

14 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 respectalign: drawtext true x y false x y translatex:,translatey: translatex translatey strokejoin: miter bevel round 14

15 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 15

16 var yoko=obj[0].width=1920 var tate=obj[0].height=943 var ybai=1; //yoko/1920 var tbai=1; //tate/943 yoko:1920 // yoko/2:960 // /2 tate:943 // tate/2:471 // /2 yoko/2-n: x tate/2-n y (yoko/2-n)*ybai: x (tate/2-n)*tbai: y 16

17 nm 400 nm 700 nm X 30 km 1 7 j k j = k 17

18 (1) (4) (5) (8) 90 (7) 90 (8) 18

19 3.2. x 1 y 1 x 2 y 2 x 3 y 3 y 1 x 2 y 2 x 3 y 1 = x 2 = y 2 = x (y 1 +x 2 ) 180-(y 2 +x 3 ) 19

20 i r sinx 1 x 1 y 1 siny 1 sinx 3 x 3 y 3 siny 3 sinx 1 = a siny 1 sinx 3 = 1 siny 3 a sini sinr x 1 y 3 x 1 = y 3 sinx 1, siny 3 = sinx 1 = a = 1 siny 3 = 1 siny 3 sinx = siny 3 siny 3 = 1 siny 3 = 1 a sinx 1 sinx 1 sinx 1 = siny 3 1 siny 3 sinx 1 sinx 1 sinx 1 1 siny 3 = sinx 1 x 1 = y 3 2 m n 1 A = x 1 20

21 y 1 x (y 1 + x 2 ) y 1 = x 2 = y 2 = x 3 y 2 x (y 2 + x 3 ) B y 1 + x 2 + y 2 + x 3 = e + e + e + e = 4e B = 360-4e C B - A C = {(360-4e) - (180 - x 1 ) = e + x 1 C = 180-4e + x 1 2 m n 1 D =180 - { y 3 + (180-4e + x 1 ) = y e - x 1 = -y 3 + 4e - x 1 ( y 3, x 1 = f ) = 4e - 2f sini i r sinr sinf f e sine 1.33 sinf sine sinf sine = 1.33 sine sine sinf =1.33(sine) sinf sine = 1.33 f = sin 1 {1.33 (sine) D = 4sin 1 {1.33 (sine) - 2e sine 0 90 sine 60 sine sine 60 sine 60 sine (3/4)sin60 = (3 3/8)sine = sinf 40.5 sine = 40.5 sinf = 60 D = 4e - 2f D = 4(40.5) - 2(60) = =

22 3.3. p 1 q 1 p 2 q 2 p 3 q 3 q 1 p 2 q 2 p 3 q 1 = p 2 = q 2 = p (q 1 +p 2 ) 180-(q 2 +p 3 ) 22

23 i r sinp 1 p 1 q 1 sinq 1 sinp 3 p 3 q 3 sinq 3 sinp 1 = b sinq 1 sinp 3 = 1 sinq 3 b sini sinr p 1 q 3 p 1 = q 3 sinp 1, sinq 3 = sinr sinp 1 sinr = b sinr = 1 sinq 3 sinr = 1 sinq 3 sinp 1 sinr 1 sinr 1 = sinq 3 sinr sinq 3 = 1 sinr sinq 3 = 1 b sinp 1 sinr sinr sinr sinp 1 sinp 1 sinr sinr = sinq 3 sinr 1 sinq 3 sinr sinr sinp 1 sinp 1 sinr sinp 1 1 sinq 3 = sinp 1 p 1 = q 3 2 m n 1 A = x 1 23

24 y 1 x (y 1 + x 2 ) y 1 = x 2 = y 2 = x 3 y 2 x (y 2 + x 3 ) B y 1 + x 2 + y 2 + x 3 = e + e + e + e = 4e B = 360-4e C B - A C = {(360-4e) - (180 - x 1 ) = e + x 1 = 180-4e + x 1 2 m n 1 D =180 - { y 3 + (180-4e + x 1 ) = y e - x 1 = -y 3 + 4e - x 1 ( y 3, x 1 = f ) =4e - 2f 24

25 3.4. u 1 v 1 u 2 v 2 u 3 v 3 u 4 v 4 v 1 u 2 v 2 u 3 v 3 u 4 v 1 = u 2 = v 2 = u 3 = v 3 = u (v 1 +u 2 ) 180-(v 2 +u 3 ) 180-(v 3 +u 2 ) 25

26 i r sinu 1 u 1 v 1 sinv 1 sinu 4 u 4 v 4 sinv 4 sinu 1 = a sinv 1 sinu 4 = 1 siny 4 a sini sinr u 1 v 3 u 1 = v 4 sinu 1, sinv 4 = sinu 1 = a = 1 sinv 4 = 1 sinv 4 sinu = sinv 4 = sinv 4 1 sinv 4 = 1 a sinu 1 sinu 1 sinu 1 = sinv 4 1 sinv 4 sinu 1 sinu 1 sinu 1 1 sinv 4 = sinu 1 u 1 = v 4 26

27 v 1 u (v 1 + u 2 ) v 1 = u 2 = v 2 = u 3 = v 3 = u 4 v 2 u 3 v 3 u (v 2 + u 3 ) (v 3 + u 4 ) A v 1 + u 2 + v 2 + u 3 + v 3 + u 4 = e + e + e + e + e + e = 6e A = 360-6e B = (180 - u 1 ) C = (180 - v 4 ) u 1, v 4 = f B = (180 - f) C = (180 - f) D = (A + B + C) = { (180-6e) + (180 - f) + (180 - f) = e f f = e + 2f = 360-6e - 2e D = 6sin 1 {1.33 (sine) - 2e sine 45.5 sinf 72 sine F = = 43.5 G = = 46.5 E = = 18 C = = 64.5 D = 180-2(64.5) =

28 3.5. r 1 s 1 r 2 s 2 r 3 s 3 r 4 s 4 s 1 r 2 s 2 r 3 s 3 r 4 s 1 = r 2 = s 2 = r 3 = s 3 = r (s 1 +r 2 ) 180-(s 2 +r 3 ) 180-(s 3 +r 2 ) 28

29 i r sinr 1 r 1 s 1 sins 1 sinr 4 r 4 s 4 sins 4 sinr 1 = a sins 1 sinr 4 = 1 sins 4 a sini sinr r 1 s 3 r 1 = s 4 sinr 1, sins 4 = sinr 1 = a = 1 sins 4 sins 4 = 1 sinr = sins 4 = sins 4 1 sins 4 = 1 a sinr 1 sinr 1 sinr 1 = sins 4 1 sins 4 sinr 1 sinr 1 sinr 1 1 sins 4 = sinr 1 r 1 = s 4 29

30 v 1 u (v 1 + u 2 ) v 1 = u 2 = v 2 = u 3 = v 3 = u 4 v 2 u 3 v 3 u (v 2 + u 3 ) (v 3 + u 4 ) A v 1 + u 2 + v 2 + u 3 + v 3 + u 4 = e + e + e + e + e + e = 6e A = 360-6e B = (180 - u 1 ) C = (180 - v 4 ) u 1, v 4 = f B = (180 - f) C = (180 - f) D = (A + B + C) = { (180-6e) + (180 - f) + (180 - f) = e f f = e + 2f = 360-6e - 2e 30

31 3.6. ( 1) ( 2) =1.33 =

32 ( 1) 42 ( 2) ( ) 42 2 ( ) ( ) ( 3) 32

33 ( ) ( 4) ( 5) ( 6) 1: 2: 3: 4: 5: 6: 33

34 [1],,, (2016), [2],,, [3] Web, HP 34

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

1 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 )