{"id":2128,"date":"2019-02-05T12:03:57","date_gmt":"2019-02-05T03:03:57","guid":{"rendered":"http:\/\/kats-eye.net\/info\/?p=2128"},"modified":"2019-02-09T12:51:36","modified_gmt":"2019-02-09T03:51:36","slug":"canvas7","status":"publish","type":"post","link":"https:\/\/kats-eye.net\/info\/2019\/02\/05\/canvas7\/","title":{"rendered":"\u304a\u7d75\u63cf\u304d\u2462\uff08\u5b9a\u5f62\u5f62\u72b6\u63cf\u753b\uff09"},"content":{"rendered":"\n\n\n
<\/td>\n<\/td>\n\u30de\u30a6\u30b9\u306b\u3088\u308b\u5b9a\u5f62\u5f62\u72b6\u63cf\u753b<\/span><\/strong><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u4eca\u56de\u306f\u30de\u30a6\u30b9\u3092\u4f7f\u3063\u3066\u3001\u59cb\u70b9\u3068\u7d42\u70b9\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u7c21\u5358\u306b\u63cf\u3051\u308b\u5b9a\u5f62\u5f62\u72b6\u306b\u3064\u3044\u3066\u691c\u8a0e\u3057\u3066\u307f\u307e\u3057\u305f\u3002\u4e0b\u306e\u56f3\u306e\u901a\u308a\u3001\u9ed2\u592a\u7dda\u3067\u56f2\u307e\u308c\u305f\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u63cf\u753b\u5f62\u72b6\u3092\u9078\u629e\u5f8c\u3001CANVAS\u4e0a\u3067\u30de\u30a6\u30b9\u3092\u4f7f\u3063\u3066\u3001\u59cb\u70b9\u9078\u629e\uff08\u30de\u30a6\u30b9\u30c0\u30a6\u30f3\uff09\u2192\u79fb\u52d5\uff08\u30de\u30a6\u30b9\u30e0\u30fc\u30d6\uff09\u2192\u7d42\u70b9\u9078\u629e\uff08\u30de\u30a6\u30b9\u30a2\u30c3\u30d7\uff09\u306e\u4e00\u9023\u306e\u64cd\u4f5c\u3067\u77e2\u5370\uff0c\u5186\uff0c\u9577\u65b9\u5f62\uff0c\u6955\u5186\u7b49\u306e\u5f62\u72b6\u3092\u63cf\u304f\u3053\u3068\u304c\u51fa\u6765\u307e\u3059\u3002
\n\uff08\u2192\u30c6\u30b9\u30c8\u30d7\u30ed\u30b0\u30e9\u30e0\u306b\u30ea\u30f3\u30af<\/a>\uff09<\/p>\n

\"\"<\/p>\n\n\n\n
<\/td>\n<\/td>\n\u30c6\u30b9\u30c8\u30d7\u30ed\u30b0\u30e9\u30e0<\/span><\/strong><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u6955\u5186\u3092\u66f8\u304f\u95a2\u6570\u304c\u7121\u3044\u306e\u306f\u4e88\u60f3\u5916\u3067\u3057\u305f\u3002scale\u3092\u6307\u5b9a\u3057\u3066\u5186\u3092\u5909\u5f62\u3055\u305b\u308b\u65b9\u6cd5\u304c\u3042\u308b\u69d8\u3067\u3059\u304c\u3001scale\u6307\u5b9a\u6642\u306b\u4f55\u6545\u304b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u3066\u3057\u307e\u3046\u306e\u3067\u3001\u65ad\u5ff5\u3057\u307e\u3057\u305f\u3002\u77e2\u5370\u3068\u9577\u4e38\u306f\u5c11\u3057\u6642\u9593\u304c\u639b\u304b\u308a\u307e\u3057\u305f\u304c\u3001\u56f3\u306e\u901a\u308a\u306a\u3093\u3068\u304b\u305d\u308c\u3089\u3057\u3044\u3082\u306e\u304c\u51fa\u6765\u307e\u3057\u305f\u3002\u30d7\u30ed\u30b0\u30e9\u30e0\u4e2d\u306b\u3082\u5404\u5f62\u72b6\u90e8\u306b\u30b3\u30e1\u30f3\u30c8\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u7d30\u304b\u3044\u8aac\u660e\u306f\u7701\u7565\u3057\u307e\u3059\u3002
\n\uff08\u2192\u30c6\u30b9\u30c8\u30d7\u30ed\u30b0\u30e9\u30e0\u306b\u30ea\u30f3\u30af<\/a>\uff09<\/p>\n

<!doctype html>\r\n<html lang=\"ja\">\r\n<head>\r\n    <meta charset=\"utf-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <title>DRAWING TEST<\/title>\r\n\r\n    <style>\r\n\t#cvs-layer { position:relative ; }\r\n\t#cvs-layer canvas { position:absolute ; top:0 ; left:0 ; }\r\n\r\n\tinput { height:30px; }\r\n\t#select-color input { width:26px; height:36px; }\r\n\t#select-shape input { padding:0; font-size:16px; font-weight:900; width:36px; height:36px; border-style:solid; border-width:4px; }\r\n    <\/style>\r\n\r\n    <script>\r\n\r\n\tvar cvs_drw ; var ctx_drw ;\r\n\tvar cvs_edt ; var ctx_edt ;\r\n\tvar cvs_wdt ; var cvs_hgt ;\r\n\tvar x_b , y_b , x_c , y_c ;\r\n\tvar f_b ;\r\n\tvar selected_shape ;\r\n\r\n\tfunction draw_begin(){\r\n\t    cvs_wdt = 840 ; cvs_hgt = 600 ;\r\n\t    cvs_drw = document.getElementById(\"CANVAS_DRW\") ; \r\n\t    ctx_drw = cvs_drw.getContext(\"2d\") ;\r\n\t    cvs_edt = document.getElementById(\"CANVAS_EDT\") ; \r\n\t    ctx_edt = cvs_edt.getContext(\"2d\") ;\r\n\r\n\t    cvs_drw.width = cvs_wdt ; cvs_drw.height = cvs_hgt ;\r\n\t    cvs_edt.width = cvs_wdt ; cvs_edt.height = cvs_hgt ;\r\n\t \r\n\t    cvs_edt_init() ; chng_col(\"#000000\") ; chng_shape(3);\r\n\t    ctx_drw.strokeRect( 0 , 0 , cvs_wdt , cvs_hgt ) ;\r\n\r\n\t    cvs_edt.addEventListener( \"mousedown\" , mouse_dn , false ) ;\r\n\t    cvs_edt.addEventListener( \"mousemove\" , mouse_mv , false ) ;\r\n\t    cvs_edt.addEventListener( \"mouseup\", mouse_up , false ) ;\r\n\t}\r\n\r\n\t\/\/\u25bc\u25bc\u25bc\u25bc\u25bc\u25bc\u3000\u30de\u30a6\u30b9\u691c\u77e5\u3000\u25bc\u25bc\u25bc\u25bc\u25bc\u25bc\r\n\tfunction mouse_dn(event){\r\n\t    var l_thkn = 1 ; var t_rate = 1 ; var l_colr = \"#333333\" ;\r\n\r\n\t    var rect = event.target.getBoundingClientRect() ;\r\n\t    x_b = event.clientX-rect.left ;\r\n\t    y_b = event.clientY-rect.top ;\r\n\t    f_b = true ;\r\n\t    ctx_edt.lineJoin = \"round\" ; ctx_edt.lineCap = \"round\" ;\r\n\r\n\t    t_rate = document.getElementById(\"s_transparency\").value\/100 ;\r\n\t    l_colr = document.getElementById(\"select-color\").style.backgroundColor ;\r\n\t    l_thkn = document.getElementById(\"l_thickness\").value ;\r\n\r\n\t    if(selected_shape==0){ctx_edt.lineCap = \"butt\";}\r\n\t    if(l_thkn>6 && 3>selected_shape){ l_thkn=6 ; document.getElementById(\"l_thickness\").value=l_thkn ; }\r\n\r\n\t    ctx_edt.globalAlpha = t_rate ; ctx_edt.lineWidth = l_thkn ;\r\n\t    ctx_edt.strokeStyle = l_colr ; ctx_edt.fillStyle = l_colr ;\r\n\t}\r\n\r\n\r\n\tfunction mouse_mv(event){\r\n\t    if(f_b){\r\n\t\tvar rect = event.target.getBoundingClientRect() ;\r\n\t\tx_c = event.clientX-rect.left ;\r\n\t\ty_c = event.clientY-rect.top ;\r\n\r\n\t\tif(selected_shape==3){\r\n\t\t    draw_line() ; x_b = x_c ; y_b = y_c ;\t\/\/ \u81ea\u7531\u7dda\r\n\t\t}else{\r\n\t\t    draw_shape() ;\t\t\t\t\/\/ \u5b9a\u578b\u5f62\u72b6\r\n\t\t}\r\n\t    }\r\n\t}\r\n\r\n\tfunction mouse_up(event){ \r\n\t    f_b=false;\r\n\t    CVS_Transfer() ;\r\n\t}\r\n\t\/\/\u25b2\u25b2\u25b2\u25b2\u25b2\u25b2\u3000\u30de\u30a6\u30b9\u691c\u77e5\u3000\u25b2\u25b2\u25b2\u25b2\u25b2\u25b2\r\n\r\n\r\n\t\/\/ \u81ea\u7531\u7dda\r\n\tfunction draw_line(){\r\n\t    ctx_edt.beginPath() ;\r\n\t    ctx_edt.moveTo(x_b,y_b) ;\r\n\t    ctx_edt.lineTo(x_c,y_c) ;\r\n\t    ctx_edt.stroke() ;\r\n\t}\r\n\r\n\t\/\/ \u5b9a\u578b\u5f62\u72b6\r\n\tfunction draw_shape(){\r\n\t    var rct_edt = cvs_edt.getBoundingClientRect() ;\r\n\t    ctx_edt.clearRect( 0, 0, rct_edt.width , rct_edt.height ) ;\t\t\/\/ CANVAS\u30af\u30ea\u30a2\r\n\t    var x_t = x_c - x_b ; var y_t = y_c - y_b ;\r\n\r\n\t    \/\/ \u25c6\u76f4\u7dda\u30fb\u77e2\u5370\u30fb\u3007\u4ed8\u77e2\u5370\r\n\t    if(selected_shape==0 || selected_shape==1 || selected_shape==2){\r\n\t\tif(selected_shape==0 || selected_shape==1){ line_p_p(x_b,y_b,x_c,y_c); }\r\n\r\n\t\tif(selected_shape==1 || selected_shape==2){\r\n\t\t    var arw_w=10; var arw_l=20;\r\n\t\t    var v_l = Math.sqrt(x_t*x_t+y_t*y_t); var x_u= x_t\/v_l; var y_u= y_t\/v_l;\r\n\t\t    var p_x1 = x_c - y_u * arw_w - x_u * arw_l; var p_y1 = y_c + x_u * arw_w - y_u * arw_l;\r\n\t\t    var p_x2 = x_c + y_u * arw_w - x_u * arw_l; var p_y2 = y_c - x_u * arw_w - y_u * arw_l;\r\n\t\t    line_p_p(x_c,y_c,p_x1,p_y1); line_p_p(x_c,y_c,p_x2,p_y2);\r\n\r\n\t\t    if(selected_shape==2){\r\n\t\t\tctx_edt.fillStyle = \"#ffffff\" ; var arw_r=20;\r\n\t\t\tvar p_x0 = x_b + x_u * arw_r ; var p_y0 = y_b + y_u * arw_r ;\r\n\t\t\tline_p_p(p_x0,p_y0,x_c,y_c);\r\n\t\t\t\/\/ctx_edt.beginPath() ; ctx_edt.moveTo(p_x0,p_y0) ; ctx_edt.lineTo(x_c,y_c) ; ctx_edt.stroke() ;\r\n\t\t\tctx_edt.beginPath(); ctx_edt.arc( x_b , y_b , arw_r , 0 , 2 * Math.PI , false) ; ctx_edt.fill();\r\n\t\t\tctx_edt.beginPath(); ctx_edt.arc( x_b , y_b , arw_r , 0 , 2 * Math.PI , false) ; ctx_edt.stroke();\r\n\t\t    }\r\n\t\t}\r\n\r\n\t    \/\/ \u25c6\u771f\u5186\uff0b\u4e21\u7aef\u5186\u5f27\uff08\u4e2d\u5fc3\uff0b\u9802\u70b9\uff11\u30f6\u6240\uff09\r\n\t    }else if(selected_shape==4 || selected_shape==5){\r\n\t\tvar x_t_abs = Math.abs(x_t) ; var y_t_abs = Math.abs(y_t) ;\r\n\t\tvar arc_p = [] ; var arc_r = 1;\r\n\t\tvar arc_c_x1 = x_b; var arc_c_y1 = y_b; var arc_c_x2 = x_b; var arc_c_y2 = y_b;\r\n\r\n\t\tif( x_t_abs > y_t_abs ){\r\n\t\t    \/\/ \u6a2a\u8ef8\uff08X\u8ef8\uff09\u9577\u3044\r\n\t\t    arc_r = Math.ceil( y_t_abs \/ 2 );\r\n\t\t    if(y_c>y_b){ arc_c_y1 = y_b + arc_r; }else{ arc_c_y1 = y_b - arc_r; }\r\n\t\t    arc_c_y2 = arc_c_y1 ; arc_p[0]=0.5; arc_p[1]=1.5; arc_p[2]=-0.5; arc_p[3]=0.5;\r\n\r\n\t\t    if(x_c>x_b){ arc_c_x1 = x_b+arc_r; arc_c_x2 = x_c - arc_r; }\r\n\t\t    else{ arc_c_x1 = x_c+arc_r; arc_c_x2 = x_b - arc_r; }\r\n\t\t    \r\n\t\t}else{\r\n\t\t    \/\/ \u7e26\u8ef8\uff08Y\u8ef8\uff09\u9577\u3044\r\n\t\t    arc_r = Math.ceil( x_t_abs \/ 2 );\t\t\r\n\t\t    if(x_c>x_b){ arc_c_x1 = x_b + arc_r; }else{ arc_c_x1 = x_b - arc_r; }\r\n\t\t    arc_c_x2 = arc_c_x1 ;\r\n\t\t    arc_p[0]=1; arc_p[1]=2; arc_p[2]=0; arc_p[3]=1;\r\n\r\n\t\t    if(y_c>y_b){ arc_c_y1 = y_b+arc_r; arc_c_y2 = y_c-arc_r; }\r\n\t\t    else{ arc_c_y1 = y_c+arc_r; arc_c_y2 = y_b-arc_r; }\r\n\t\t}\r\n\t\t\r\n\t\tctx_edt.beginPath();\r\n\t\tctx_edt.arc( arc_c_x1 , arc_c_y1 , arc_r , arc_p[0] * Math.PI , arc_p[1] * Math.PI , false) ;\r\n\t\tctx_edt.arc( arc_c_x2 , arc_c_y2 , arc_r , arc_p[2] * Math.PI , arc_p[3] * Math.PI , false) ;\r\n\t\tctx_edt.closePath();\r\n\t\tif(selected_shape==5){ ctx_edt.fill(); }else if(selected_shape==4){ ctx_edt.stroke(); }\r\n\r\n\r\n\t    \/\/ \u25c6\u771f\u5186\uff0b\u4e21\u7aef\u5186\u5f27\uff08\u4e2d\u5fc3\uff0b\u9802\u70b9\uff11\u30f6\u6240\uff09\r\n\t    }else if(selected_shape==14 || selected_shape==15){\r\n\t\tvar x_t_abs = Math.abs(x_t) ; var y_t_abs = Math.abs(y_t) ;\r\n\t\tvar arc_p = [] ; var arc_r = 1;\r\n\t\tvar arc_c_x1 = x_b; var arc_c_y1 = y_b; var arc_c_x2 = x_b; var arc_c_y2 = y_b;\r\n\r\n\t\tif( x_t_abs > y_t_abs ){ \r\n\t\t    \/\/ \u6a2a\u8ef8\uff08X\u8ef8\uff09\u9577\u3044\r\n\t\t    arc_r = Math.ceil( y_t_abs );\r\n\t\t    \r\n\t\t    if(x_b>x_c){\r\n\t\t\tarc_p[0]=0.5; arc_p[1]=1.5; arc_p[2]=-0.5; arc_p[3]=0.5;\r\n\t\t\tarc_c_x1 = x_c+arc_r; arc_c_x2 = x_b - x_t - arc_r;\r\n\t\t    }else{\r\n\t\t\tarc_p[0]=-0.5; arc_p[1]=0.5; arc_p[2]=0.5; arc_p[3]=1.5;\r\n\t\t\tarc_c_x1 = x_c-arc_r; arc_c_x2 = x_b - x_t + arc_r;\r\n\t\t    }\r\n\t\t    \r\n\t\t}else{\r\n\t\t    \/\/ \u7e26\u8ef8\uff08Y\u8ef8\uff09\u9577\u3044\r\n\t\t    arc_r = Math.ceil( x_t_abs );\r\n\r\n\t\t    if(y_b>y_c){\r\n\t\t\tarc_p[0]=1; arc_p[1]=2; arc_p[2]=0; arc_p[3]=1;\r\n\t\t\tarc_c_y1 = y_c+arc_r; arc_c_y2 = y_b - y_t - arc_r;\r\n\t\t    }else{\r\n\t\t\tarc_p[0]=0; arc_p[1]=1; arc_p[2]=1; arc_p[3]=2;\r\n\t\t        arc_c_y1 = y_c-arc_r; arc_c_y2 = y_b - y_t + arc_r;\r\n\t\t    }\r\n\t\t}\r\n\t\t\r\n\t\tctx_edt.beginPath();\r\n\t\tctx_edt.arc( arc_c_x1 , arc_c_y1 , arc_r , arc_p[0] * Math.PI , arc_p[1] * Math.PI , false) ;\r\n\t\tctx_edt.arc( arc_c_x2 , arc_c_y2 , arc_r , arc_p[2] * Math.PI , arc_p[3] * Math.PI , false) ;\r\n\t\tctx_edt.closePath();\r\n\t\tif(selected_shape==5){ ctx_edt.fill(); }else if(selected_shape==4){ ctx_edt.stroke(); }\r\n\r\n\t    \/\/ \u25c6\u9577\u65b9\u5f62\u8f2a\u90ed\uff08\u5bfe\u89d2\uff12\u30f6\u6240\uff09\r\n\t    }else if(selected_shape==6){\r\n\t\tctx_edt.beginPath() ; ctx_edt.strokeRect( x_b , y_b, x_t , y_t );\r\n\r\n\t    \/\/ \u25c6\u9577\u65b9\u5f62\u5857\u308a\u6f70\u3057\uff08\u5bfe\u89d2\uff12\u30f6\u6240\uff09\r\n\t    }else if(selected_shape==7){\r\n\t\tctx_edt.fillRect( x_b , y_b, x_t , y_t );\r\n\r\n\t    \/\/ \u25c6\u6955\u5186\uff08\u5bfe\u89d2\uff12\u30f6\u6240\uff09\r\n\t    }else if(selected_shape==8 || selected_shape==9 ){\r\n\t\tdraw_ellipse( x_b , y_b, x_t , y_t , selected_shape - 8 );\r\n\r\n\t    }\r\n\t}\r\n\r\n\r\n\t\/\/ \u25c6\u6955\u5186\uff08\u5bfe\u89d2\uff12\u30f6\u6240\uff09\r\n\tfunction draw_ellipse( ps_x , ps_y , w , h , fff ){\r\n\t    var c_x = ps_x + w \/ 2 , c_y = ps_y + h \/ 2 ;\r\n\t    var m_x = c_x - w \/ 2 , s_x = c_x + w \/ 2 , u_y = c_y - h \/ 2 , e_y = c_y + h \/ 2 ;\r\n\t    var elp_eff = 0.551784; var x_elp = elp_eff * w \/ 2; var y_elp = elp_eff * h \/ 2;\r\n\t\r\n\t    ctx_edt.beginPath();\r\n\t    ctx_edt.moveTo( c_x , u_y );\r\n\t    ctx_edt.bezierCurveTo( c_x + x_elp , u_y , s_x , c_y - y_elp , s_x , c_y );\r\n\t    ctx_edt.bezierCurveTo( s_x , c_y + y_elp , c_x + x_elp , e_y , c_x , e_y );\r\n\t    ctx_edt.bezierCurveTo( c_x - x_elp , e_y , m_x , c_y + y_elp , m_x , c_y );\r\n\t    ctx_edt.bezierCurveTo( m_x , c_y - y_elp , c_x - x_elp , u_y , c_x , u_y );\r\n\t    ctx_edt.closePath();\r\n\t    if( fff==0 ){ ctx_edt.stroke(); } else { ctx_edt.fill(); }\r\n\t}\r\n\r\n\t\/\/ \uff12\u70b9\u9593\u76f4\u7dda\r\n\tfunction line_p_p(ps_x,ps_y,pe_x,pe_y){\r\n\t    ctx_edt.beginPath() ; ctx_edt.moveTo(ps_x,ps_y) ; ctx_edt.lineTo(pe_x,pe_y) ; ctx_edt.stroke() ;\r\n\t}\r\n\r\n\t\/\/ CVS_edt \u521d\u671f\u5316\r\n\tfunction cvs_edt_init(){\r\n\t    ctx_edt.globalAlpha = 1 ; \r\n\t    ctx_edt.lineWidth = 1 ;\r\n\t    ctx_edt.strokeStyle = \"#000000\" ;\r\n\t    ctx_edt.clearRect( 0 , 0 , cvs_wdt , cvs_hgt ) ;\r\n\t    ctx_edt.strokeRect( 0 , 0 , cvs_wdt , cvs_hgt ) ;\r\n\t}\r\n\r\n\t\/\/ CVS_drw \u521d\u671f\u5316\r\n\tfunction cvs_drw_init(){\r\n\t    ctx_drw.globalAlpha = 1 ; \r\n\t    ctx_drw.lineWidth = 1 ;\r\n\r\n\t    ctx_drw.clearRect( 0 , 0 , cvs_wdt , cvs_hgt ) ;\r\n\t    ctx_drw.strokeRect( 0 , 0 , cvs_wdt , cvs_hgt ) ;\r\n\t}\r\n\r\n\t\/\/ \u63cf\u753b\u8272\u5909\u66f4\r\n\tfunction chng_col(gColor){ \r\n\t    ctx_edt.strokeStyle = gColor ;\r\n\t    document.getElementById(\"select-color\").style.backgroundColor = gColor ;\r\n\t}\r\n\r\n\t\/\/ \u63cf\u753b\u5f62\u72b6\u5909\u66f4\r\n\tfunction chng_shape(shp_num){ \r\n\t    var elm_tmp = document.getElementById(\"select-shape\") ;\r\n\t    var elm_inp = elm_tmp.getElementsByTagName(\"input\") ;\r\n\t    for(var i=0 ; elm_inp.length > i ; ++i){\r\n\t\tif(i==shp_num){\r\n\t\t    \/\/elm_inp[i].style.backgroundColor = \"#ffd700\" ;\r\n\t\t    elm_inp[i].style.borderColor = \"#ff0000\" ;\r\n\t\t} else {\r\n\t\t    \/\/elm_inp[i].style.backgroundColor = \"#d3d3d3\" ;\r\n\t\t    elm_inp[i].style.borderColor = \"#000000\" ;\r\n\t\t}\r\n\t    }\r\n\t    selected_shape = shp_num ;\r\n\t}\r\n\r\n\t\/\/ CANVAS \u8ee2\u9001\r\n\tfunction CVS_Transfer(){\r\n\t    var img_edt = new Image ;\r\n\t    img_edt.src = ctx_edt.canvas.toDataURL() ;\r\n\t    img_edt.onload = function(){\r\n\t\tctx_drw.drawImage(img_edt,0,0) ;\r\n\t    \tcvs_edt_init();\r\n\t    }\r\n\t}\r\n\r\n    <\/script>\r\n<\/head>\r\n\r\n<body onLoad=\"draw_begin()\">\r\n    <TABLE><TR>\r\n    <TD><input type=\"button\" value=\"\u6d88\u53bb\" id=\"ClearCVS\" onclick=\"cvs_drw_init()\"><\/TD>\r\n    <TD style=\"width:10px;\"><\/TD>\r\n    <TD id=\"select-shape\">\r\n\t<input type=\"button\" value=\"\uff0f\" onclick=\"chng_shape(0)\">\r\n\t<input type=\"button\" value=\"\u2192\" onclick=\"chng_shape(1)\">\r\n\t<input type=\"button\" value=\"\u2642\" onclick=\"chng_shape(2)\">\r\n\t<input type=\"button\" value=\" \uff5e \" onclick=\"chng_shape(3)\">\r\n\r\n\t<input type=\"button\" value=\"\u25cb\" onclick=\"chng_shape(4)\">\r\n\t<input type=\"button\" value=\"\u25cf\" onclick=\"chng_shape(5)\">\r\n\t<input type=\"button\" value=\"\u25a1\" onclick=\"chng_shape(6)\">\r\n\t<input type=\"button\" value=\"\u25a0\" onclick=\"chng_shape(7)\">\r\n\t<input type=\"button\" value=\"\u6955\" onclick=\"chng_shape(8)\" style=\"background-color:#f0f0f0;\">\r\n\t<input type=\"button\" value=\"\u6955\" onclick=\"chng_shape(9)\" style=\"background-color:#707070;\">\r\n    <\/TD>\r\n    <TD style=\"width:5px;\"><\/TD>\r\n    <TD>\r\n\t<input type=\"button\" style=\"background-color:#000000;\" onclick=\"chng_col('#000000')\">\r\n\t<input type=\"button\" style=\"background-color:#008000;\" onclick=\"chng_col('#008000')\">\r\n\t<input type=\"button\" style=\"background-color:#00ff00;\" onclick=\"chng_col('#00ff00')\">\r\n\t<input type=\"button\" style=\"background-color:#0000ff;\" onclick=\"chng_col('#0000ff')\">\r\n\t<input type=\"button\" style=\"background-color:#00ffff;\" onclick=\"chng_col('#00ffff')\">\r\n\t<input type=\"button\" style=\"background-color:#fffacf;\" onclick=\"chng_col('#fffacf')\">\r\n\t<input type=\"button\" style=\"background-color:#ffff00;\" onclick=\"chng_col('#ffff00')\">\r\n\t<input type=\"button\" style=\"background-color:#ffa500;\" onclick=\"chng_col('#ffa500')\">\r\n\t<input type=\"button\" style=\"background-color:#ff00ff;\" onclick=\"chng_col('#ff00ff')\">\r\n\t<input type=\"button\" style=\"background-color:#ff0000;\" onclick=\"chng_col('#ff0000')\">\r\n    <\/TD>\r\n    <TD style=\"width:5px;\"><\/TD>\r\n    <TD id=\"select-color\">\r\n\t<select id=\"s_transparency\" style=\"height:28px; text-align:center; font-size:16px; margin:0 3px;\">\r\n\t<option value=\"100\">100<\/option><option value=\"80\">80<\/option><option value=\"60\">60<\/option>\r\n\t<option value=\"40\">40<\/option><option value=\"20\">20<\/option><\/select>\r\n\r\n\t<input type=\"number\" id=\"l_thickness\" min=\"1\" max=\"500\" value=\"3\" style=\"height:23px; width:50px; text-align:center; font-size:16px; margin:0 3px;\">\r\n    <\/TD>\r\n    \r\n    <\/TR><\/TABLE>\r\n\r\n    <div id=\"cvs-layer\">\r\n\t<canvas id=\"CANVAS_DRW\"><\/canvas>\r\n\t<canvas id=\"CANVAS_EDT\"><\/canvas>\r\n    <\/div>\r\n\r\n<\/body> \r\n\r\n<\/html><\/pre>\n\n\n\n
<\/td>\n<\/td>\n\u8ee2\u9001\u30fb\u91cd\u306d\u66f8\u304d\u306e\u76ee\u7684<\/span><\/strong><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u5148\u56de\u3001\uff12\u3064\u306eCANVAS\u3092\u7528\u610f\u3057\u3001\uff11\u3064\u306eCANVAS\u306b\u306f\u9014\u4e2d\u306e\u72b6\u614b\u3092\u8868\u793a\u3057\u3001\u5f62\u72b6\u78ba\u5b9a\u6642\u306b\u3082\u3046\uff11\u3064\u306eCANVAS\u306b\u30c7\u30fc\u30bf\u3092\u8ee2\u9001\u30fb\u91cd\u306d\u66f8\u304d\u3059\u308b\u78ba\u8a8d\u3092\u884c\u3044\u307e\u3057\u305f\u3002\u305d\u306e\u76ee\u7684\u306b\u3064\u3044\u3066\u5c11\u3057\u6574\u7406\u3057\u3066\u304a\u304d\u307e\u3059\u3002\u77e2\u5370\u3092\u63cf\u753b\u3059\u308b\u969b\u306b\u59cb\u70b9\u3068\u7d42\u70b9\u3092\u6307\u5b9a\u3057\u307e\u3059\u304c\u3001\u4e0b\u306e\u56f3\u306f\u30de\u30a6\u30b9\u30e0\u30fc\u30d6\u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3057\u305f\u969b\u306e\u9014\u4e2d\u306e\u5f62\u72b6\u3092\u6d88\u3055\u305a\u306b\u6b8b\u3057\u305f\u3082\u306e\u3067\u3059\u3002\u30c6\u30b9\u30c8\u30d7\u30ed\u30b0\u30e9\u30e0\u3067\u306f\u3001\u30e0\u30fc\u30d6\u30a4\u30d9\u30f3\u30c8\u767a\u751f\u6642\u306b\u90fd\u5ea6CANVAS\u3092\u30af\u30ea\u30a2\u3057\u66f8\u304d\u76f4\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u6700\u65b0\u306e\u9014\u4e2d\u306e\u72b6\u614b\u3060\u3051\u3092\u78ba\u8a8d\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u5b9f\u969b\u306b\u306f\u4e0b\u56f3\u306e\u901a\u308a\uff11\u3064\u306e\u5b9a\u5f62\u5f62\u72b6\u3092\u63cf\u304f\u904e\u7a0b\u3067\u4f55\u56de\u3082\u63cf\u753b\u3092\u884c\u3063\u3066\u3044\u307e\u3059\u3002
\n\u4eca\u56de\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u3067\u306f\u884c\u756a98\u304c\u3001CANVAS\u3092\u30af\u30ea\u30a2\u3059\u308b\u547d\u4ee4\u3067\u3059\u306e\u3067\u3001\u3053\u306e\u884c\u3092\u524a\u9664\u3082\u3057\u304f\u306f\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3059\u308c\u3070\u4e0b\u8a18\u306e\u69d8\u306a\u63cf\u753b\u7d50\u679c\u306b\u306a\u308a\u307e\u3059\u3002
\n\uff08\u2192\u30af\u30ea\u30a2\u3057\u306a\u3044\u30c6\u30b9\u30c8\u30d7\u30ed\u30b0\u30e9\u30e0\u306b\u30ea\u30f3\u30af<\/a>\uff09
\n\"\"\u4e00\u65b9\u3001CANVAS\u5168\u4f53\u3092\u30af\u30ea\u30a2\u3059\u308b\u3068\u3001\u3053\u308c\u307e\u3067\u66f8\u3044\u305f\u4ed6\u306e\u753b\u50cf\u3082\u6d88\u3057\u3066\u3057\u307e\u3046\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u306e\u3067\u3001\u4eca\u56de\u306f\uff12\u3064\u306eCANVAS\u3092\u7528\u610f\u3057\u5f62\u72b6\u78ba\u5b9a\u6642\u306b\u8ee2\u9001\u30fb\u91cd\u306d\u66f8\u304d\u3059\u308b\u3053\u3068\u3068\u3057\u3066\u3044\u307e\u3059\u3002
\n\u5f62\u72b6\u78ba\u5b9a\u6642\u306b\u3082\u3046\u4e00\u3064\u306eCANVAS\u306b\u6539\u3081\u3066\u63cf\u753b\u3059\u308b\u65b9\u6cd5\u3082\u3042\u308b\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u8ee2\u9001\u65b9\u5f0f\u3067\u4eca\u306e\u3068\u3053\u308d\u554f\u984c\u306a\u3055\u305d\u3046\u306a\u306e\u3067\u78ba\u8a8d\u3057\u3066\u3044\u307e\u305b\u3093\u3002\uff08\u30c7\u30d0\u30a4\u30b9\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3092\u95a2\u6570\u306e\u5f15\u6570\u306b\u3057\u3066\u3001\u63cf\u753b\u5148\u3092\u5909\u3048\u308c\u3070\u3001\u540c\u3058\u95a2\u6570\u3067\u5bfe\u5fdc\u3067\u304d\u308b\u69d8\u306b\u3082\u601d\u3044\u307e\u3057\u305f\u304c\u3001\u5c11\u3057\u9762\u5012\u306a\u306e\u3067\u3068\u308a\u3042\u3048\u305a\u4fdd\u7559\u306b\u3057\u3066\u3044\u307e\u3059\u3002\uff09<\/p>\n\n\n\n
<\/td>\n<\/td>\n\u307e\u3068\u3081<\/span><\/strong><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u6b21\u56de\u306f\u63cf\u753b\u5185\u5bb9\u3092\u6d88\u3059\u65b9\u6cd5\u3084CANVAS\u3078\u306e\u6587\u5b57\u51fa\u529b\u306b\u3064\u3044\u3066\u3082\u8abf\u3079\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002\u307e\u305f\u3001\u8fd1\u3044\u3046\u3061\u306b\u3082\u3046\u4e00\u3064CANVAS\u3092\u91cd\u306d\u3066\u3001\u4e00\u756a\u4e0b\u306eCANVAS\u306b\u5199\u771f\u3092\u63cf\u753b\u3057\u3001\u3042\u305f\u304b\u3082\u5199\u771f\u306b\u63cf\u753b\u3057\u3066\u3044\u308b\u69d8\u306a\u6a5f\u80fd\u3092\u8ffd\u52a0\u3057\u3066\u307f\u3088\u3046\u3068\u601d\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u30de\u30a6\u30b9\u306b\u3088\u308b\u5b9a\u5f62\u5f62\u72b6\u63cf\u753b \u4eca\u56de\u306f\u30de\u30a6\u30b9\u3092\u4f7f\u3063\u3066\u3001\u59cb\u70b9\u3068\u7d42\u70b9\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u7c21\u5358\u306b\u63cf\u3051\u308b\u5b9a\u5f62\u5f62\u72b6\u306b\u3064\u3044\u3066\u691c\u8a0e\u3057\u3066\u307f\u307e\u3057\u305f\u3002\u4e0b\u306e\u56f3\u306e\u901a\u308a\u3001\u9ed2\u592a\u7dda\u3067\u56f2\u307e\u308c\u305f\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u63cf\u753b\u5f62\u72b6\u3092\u9078\u629e\u5f8c\u3001CANVAS\u4e0a\u3067\u30de\u30a6\u30b9\u3092\u4f7f\u3063\u3066 … \u7d9a\u304d\u3092\u8aad\u3080 \u304a\u7d75\u63cf\u304d\u2462\uff08\u5b9a\u5f62\u5f62\u72b6\u63cf\u753b\uff09<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":2138,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[44],"tags":[54,53,48],"_links":{"self":[{"href":"https:\/\/kats-eye.net\/info\/wp-json\/wp\/v2\/posts\/2128"}],"collection":[{"href":"https:\/\/kats-eye.net\/info\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kats-eye.net\/info\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kats-eye.net\/info\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kats-eye.net\/info\/wp-json\/wp\/v2\/comments?post=2128"}],"version-history":[{"count":19,"href":"https:\/\/kats-eye.net\/info\/wp-json\/wp\/v2\/posts\/2128\/revisions"}],"predecessor-version":[{"id":2184,"href":"https:\/\/kats-eye.net\/info\/wp-json\/wp\/v2\/posts\/2128\/revisions\/2184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kats-eye.net\/info\/wp-json\/wp\/v2\/media\/2138"}],"wp:attachment":[{"href":"https:\/\/kats-eye.net\/info\/wp-json\/wp\/v2\/media?parent=2128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kats-eye.net\/info\/wp-json\/wp\/v2\/categories?post=2128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kats-eye.net\/info\/wp-json\/wp\/v2\/tags?post=2128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}