1
1.1. jquery 1 jquery jcanvas jquery JavaScript 1.1.0.1. 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 3.0 30KB 2
6. (Ajax) Ajax(Asynchronous JavaScript+XML) jquery 1.1.0.2. jquery Hello World! Hello World! $("#test").html("hello World!") $("#test") id test.html( Hello World! ) <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> $(function(){ $("#test").html("hello World!") }); </script> <head> <body> <div id="test"></div> </body> </html> jqueary JavaScript HTML5 1.1.1. JavaScript JavaScript Web Web Web JavaScript Web HTML Web JavaScript 1.1.1.1. HTML5 1. JavaScript 2. JavaScript HTML HTML 3. JavaScript 3
4. JavaScript 1 1.1.2. HTML5 HTML5 HTML 5 W3C HTML HTML5 HTML5 1.1.2.1. HTML5 1. API API 2. HTML Web Web 3. HTML img video audio 4. Internet Explorer7 Internet Explorer8 IE8 HTML5 IE8 HTML5 1.2. jcanvas jcanvas jquery HTML5 Canvas Canvas HTML JavaScript Web HTML 1.2.1. Canvas Canvas HTML5 Canvas JavaScript API( ) ( ) 4
( ) 1.2.1.1. Canvas 1. 2. 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
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 <!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <script src="jquery-1.9.1.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
1.2.4. jcanvas jcanvas $("canvas")[0].width = $(window).width(); $("canvas")[0].height = $(window).height(); strokestyle: fillstyle: strokewidth: x: x y: y fillstyle strokestyle 1.3. jcanvas 1.3.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, 8
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
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}}); 1.3.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( ) 10
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
( )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; }}); 1.3.3. clearcanvas() rotatecanvas(x:, y:, rotate: ) x: y: rotate: scalecanvas(x:, y:, scalex:, scaley: ) x: y: scalex: scaley: scalecanvas(scale:2).drawrect 12
translatecanvas(translate:) translate: translatey: detectpixelratio(function(ratio)ratio ) restorecanvas( ) getcanvasimage ( ) Base64 PNG, jpg JPEG setpixels( ) 1.3.4. creategradient( ) createpattern( ) getcanvasimage( ) Base64 geteventhooks( ) measuretext( ) jcanvas.extend( ) 1.3.5. shadowblur: 0 100 0 100 shadowcolor: shadowstroke: shadowx:, shadowy: x y scalex:, scaley: x y canvas opacity: 0 1 0 1 13
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
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
2 2.1. 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
3.1. 3 1 10 1 nm 400 nm 700 nm X 30 km 1 7 j k j = k 17
(1) (4) (5) (8) 90 (7) 90 (8) 18
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 3 180-(y 1 +x 2 ) 180-(y 2 +x 3 ) 19
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 1 1 1 = 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 = 180 - x 1 20
y 1 x 2 180 - (y 1 + x 2 ) y 1 = x 2 = y 2 = x 3 y 2 x 3 180 - (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 ) = 360-180 - 4e + x 1 C = 180-4e + x 1 2 m n 1 D =180 - { y 3 + (180-4e + x 1 ) = 180 - y 3-180 + 4e - 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 = 0.6495 sinf 40.5 sine = 40.5 sinf = 60 D = 4e - 2f D = 4(40.5) - 2(60) = 162-120 = 42 42 42 21
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 3 180-(q 1 +p 2 ) 180-(q 2 +p 3 ) 22
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 = 180 - x 1 23
y 1 x 2 180 - (y 1 + x 2 ) y 1 = x 2 = y 2 = x 3 y 2 x 3 180 - (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 ) = 360-180 - 4e + x 1 = 180-4e + x 1 2 m n 1 D =180 - { y 3 + (180-4e + x 1 ) = 180 - y 3-180 + 4e - x 1 = -y 3 + 4e - x 1 ( y 3, x 1 = f ) =4e - 2f 24
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 4 180-(v 1 +u 2 ) 180-(v 2 +u 3 ) 180-(v 3 +u 2 ) 25
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 1 1 1 = 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
v 1 u 2 180 - (v 1 + u 2 ) v 1 = u 2 = v 2 = u 3 = v 3 = u 4 v 2 u 3 v 3 u 4 180 - (v 2 + u 3 ) 180 - (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 = 360 - (A + B + C) = 360 - { (180-6e) + (180 - f) + (180 - f) = 360-360 + 6e - 180 + f - 180 + f = -360 + 6e + 2f = 360-6e - 2e D = 6sin 1 {1.33 (sine) - 2e sine 45.5 sinf 72 sine F = 180-3 45.5 = 43.5 G = 90-43.5 = 46.5 E = 90-72 = 18 C = 46.5 + 18 = 64.5 D = 180-2(64.5) = 51 51 42 27
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 4 180-(s 1 +r 2 ) 180-(s 2 +r 3 ) 180-(s 3 +r 2 ) 28
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 1 1 1 = 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
v 1 u 2 180 - (v 1 + u 2 ) v 1 = u 2 = v 2 = u 3 = v 3 = u 4 v 2 u 3 v 3 u 4 180 - (v 2 + u 3 ) 180 - (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 = 360 - (A + B + C) = 360 - { (180-6e) + (180 - f) + (180 - f) = 360-360 + 6e - 180 + f - 180 + f = -360 + 6e + 2f = 360-6e - 2e 30
3.6. ( 1) ( 2) 42 50 =1.33 =1.34 31
3.7. 42 ( 1) 42 ( 2) ( ) 42 2 ( ) ( ) 42 42 10 ( 3) 32
( ) ( 4) ( 5) 800 930 1 10 1 1971 ( 6) 1: 2: 3: 4: 5: 6: 33
[1],,, (2016), 0 16. [2],,, 2016. [3] Web, HP http://www.url 34