2a:null 2b:["$","title",null,{"children":"Blockly Canvas Extensions | Feng Yifei | Observable"}] 30:T607,function registerBlocklyCanvasExtensions(Blockly) { const category = { name: "画板", kind: "category", colour: 20, contents: [ { name: "全局", kind: "category", colour: 80, contents: [ canvasGlobalStyle(Blockly), ] }, { name: "路径", kind: "category", colour: 120, contents: [ canvasBeginPath(Blockly), canvasClosePath(Blockly), canvasMoveTo(Blockly), canvasLineTo(Blockly) ] }, { name: "形状", kind: "category", colour: 160, contents: [canvasRect(Blockly), canvasQuad(Blockly), canvasTriangle(Blockly), canvasBlocklyArc(Blockly), canvasPoint(Blockly), canvasEllipse(Blockly), canvasBezierCurve(Blockly), canvasQuadraticCurve(Blockly), canvasText(Blockly), canvasImage(Blockly), canvasClock(Blockly) ] }, { name: "绘制", kind: "category", colour: 180, contents: [canvasStroke(Blockly), canvasFill(Blockly)] }, { name: "变换", kind: "category", colour: 200, contents: [canvasSave(Blockly), canvasSetTransform(Blockly), canvasTransform(Blockly), canvasTranslate(Blockly), canvasScale(Blockly), canvasRestore(Blockly) ] } ] }; return category; }31:T61c,function canvasGlobalStyle(Blockly) { const name = BlocklyCanvasConstants.GlobalStyle; Blockly.Blocks[name] = { init: function() { this.appendDummyInput().appendField("全局样式") this.appendValueInput("backgroundColor") .setCheck("Colour") .setAlign(Blockly.ALIGN_CENTRE) .appendField("背景色"); this.appendValueInput("opacity") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("不透明度"); this.setInputsInline(false); this.setPreviousStatement(true, null); this.setNextStatement(true, null); this.setColour(25); this.setTooltip(""); this.setHelpUrl(); } }; Blockly.JavaScript[name] = function(block) { let backgroundColor = Blockly.JavaScript.valueToCode( block, 'backgroundColor', Blockly.JavaScript.ORDER_NONE ); let opacity = Blockly.JavaScript.valueToCode( block, 'opacity', Blockly.JavaScript.ORDER_NONE ); let code = ` canvas.style.backgroundColor = ${backgroundColor}; canvas.style.opacity = ${opacity}; `; return code; }; return { kind: "block", blockxml: ` #000000 0.5 ` }; }32:Tdf9,function canvasBeginPath(Blockly) { const name = BlocklyCanvasConstants.BeginPath; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .setAlign(Blockly.ALIGN_CENTRE) .appendField("开始路径"); this.appendDummyInput() .appendField("端点样式") .appendField( new Blockly.FieldDropdown([ ["butt", "butt"], ["round", "round"], ["square", "square"] ]), "lineCap" ); this.appendDummyInput() .appendField("折点样式") .appendField( new Blockly.FieldDropdown([ ["miter", "miter"], ["round", "round"], ["bevel", "bevel"] ]), "lineJoin" ); this.appendValueInput("strokeStyle") .setCheck("Colour") .setAlign(Blockly.ALIGN_CENTRE) .appendField("线条颜色"); this.appendValueInput("lineWidth") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("线条宽度"); this.appendValueInput("fillStyle") .setCheck("Colour") .setAlign(Blockly.ALIGN_CENTRE) .appendField("填充颜色"); this.appendValueInput("transparency") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("透明度"); this.setInputsInline(false); this.setPreviousStatement(true, null); this.setNextStatement(true, null); this.setColour(10); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let dropdown_linecap = block.getFieldValue('lineCap'); let dropdown_linejoin = block.getFieldValue('lineJoin'); let value_strokestyle = Blockly.JavaScript.valueToCode( block, 'strokeStyle', Blockly.JavaScript.ORDER_NONE ); let value_linewidth = Blockly.JavaScript.valueToCode( block, 'lineWidth', Blockly.JavaScript.ORDER_ATOMIC ); let value_fillstyle = Blockly.JavaScript.valueToCode( block, 'fillStyle', Blockly.JavaScript.ORDER_NONE ); let transparency = Blockly.JavaScript.valueToCode( block, 'transparency', Blockly.JavaScript.ORDER_NONE ); let code = ` context.lineCap = '${dropdown_linecap}'; context.lineJoin = '${dropdown_linejoin}'; context.strokeStyle = ${value_strokestyle}; context.lineWidth = ${value_linewidth}; context.fillStyle = ${value_fillstyle}; context.globalAlpha = ${transparency}; context.beginPath(); ${next}`; return code; }; return { kind: "block", blockxml: ` #000000 1 #000000 1 ` }; }33:T68d,function canvasMoveTo(Blockly) { const name = BlocklyCanvasConstants.MoveTo; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .appendField("移动到"); this.appendValueInput("X") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X"); this.appendValueInput("Y") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y"); this.setInputsInline(false); this.setOutput(true, null); this.setColour(50); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let value_x = Blockly.JavaScript.valueToCode( block, 'X', Blockly.JavaScript.ORDER_ATOMIC ); let value_y = Blockly.JavaScript.valueToCode( block, 'Y', Blockly.JavaScript.ORDER_ATOMIC ); // TODO: Assemble JavaScript into code variable. let code = ` context.moveTo(${value_x},${value_y}); ${next}`; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` 0 0 ` }; }34:T64b,function canvasLineTo(Blockly) { const name = BlocklyCanvasConstants.LineTo; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .appendField("画直线"); this.appendValueInput("X") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X"); this.appendValueInput("Y") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y"); this.setInputsInline(false); this.setOutput(true, null); this.setColour(70); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let value_x = Blockly.JavaScript.valueToCode( block, 'X', Blockly.JavaScript.ORDER_ATOMIC ); let value_y = Blockly.JavaScript.valueToCode( block, 'Y', Blockly.JavaScript.ORDER_ATOMIC ); let code = ` context.lineTo(${value_x},${value_y}); ${next}`; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` 100 100 ` }; }35:T96c,function canvasRect(Blockly) { const name = BlocklyCanvasConstants.Rect; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .appendField("矩形"); this.appendValueInput("X1") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X1"); this.appendValueInput("Y1") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y1"); this.appendValueInput("X2") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X2"); this.appendValueInput("Y2") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y2"); this.setOutput(true, null); this.setColour(170); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rect"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let value_x1 = Blockly.JavaScript.valueToCode( block, 'X1', Blockly.JavaScript.ORDER_ATOMIC ); let value_y1 = Blockly.JavaScript.valueToCode( block, 'Y1', Blockly.JavaScript.ORDER_ATOMIC ); let value_x2 = Blockly.JavaScript.valueToCode( block, 'X2', Blockly.JavaScript.ORDER_ATOMIC ); let value_y2 = Blockly.JavaScript.valueToCode( block, 'Y2', Blockly.JavaScript.ORDER_ATOMIC ); let code = ` context.rect(${value_x1},${value_y1},${value_x2},${value_y2}); ${next} `; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` 20 20 160 140 ` }; }36:Tfed,function canvasQuad(Blockly) { const name = BlocklyCanvasConstants.Quad; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .appendField("四边形"); this.appendValueInput("X1") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X1"); this.appendValueInput("Y1") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y1"); this.appendValueInput("X2") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X2"); this.appendValueInput("Y2") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y2"); this.appendValueInput("X3") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X3"); this.appendValueInput("Y3") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y3"); this.appendValueInput("X4") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X4"); this.appendValueInput("Y4") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y4"); this.setOutput(true, null); this.setColour(175); this.setTooltip(""); this.setHelpUrl(""); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let value_x1 = Blockly.JavaScript.valueToCode( block, 'X1', Blockly.JavaScript.ORDER_ATOMIC ); let value_y1 = Blockly.JavaScript.valueToCode( block, 'Y1', Blockly.JavaScript.ORDER_ATOMIC ); let value_x2 = Blockly.JavaScript.valueToCode( block, 'X2', Blockly.JavaScript.ORDER_ATOMIC ); let value_y2 = Blockly.JavaScript.valueToCode( block, 'Y2', Blockly.JavaScript.ORDER_ATOMIC ); let value_x3 = Blockly.JavaScript.valueToCode( block, 'X3', Blockly.JavaScript.ORDER_ATOMIC ); let value_y3 = Blockly.JavaScript.valueToCode( block, 'Y3', Blockly.JavaScript.ORDER_ATOMIC ); let value_x4 = Blockly.JavaScript.valueToCode( block, 'X4', Blockly.JavaScript.ORDER_ATOMIC ); let value_y4 = Blockly.JavaScript.valueToCode( block, 'Y4', Blockly.JavaScript.ORDER_ATOMIC ); let code = ` context.moveTo(${value_x1}, ${value_y1}); context.lineTo(${value_x2}, ${value_y2}); context.lineTo(${value_x3}, ${value_y3}); context.lineTo(${value_x4}, ${value_y4}); context.lineTo(${value_x1}, ${value_y1}); ${next} `; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` 100 100 80 250 250 300 160 100 ` }; }37:Ta2c,function canvasPoint(Blockly) { const name = BlocklyCanvasConstants.Point; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .setAlign(Blockly.ALIGN_CENTRE) .appendField("圆点"); this.appendValueInput("startX") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X"); this.appendValueInput("startY") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y"); this.appendValueInput("R") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("R"); this.appendValueInput("fillStyle") .setCheck("Colour") .setAlign(Blockly.ALIGN_CENTRE) .appendField("颜色"); this.setOutput(true, null); this.setColour(185); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let value_startx = Blockly.JavaScript.valueToCode( block, 'startX', Blockly.JavaScript.ORDER_ATOMIC ); let value_starty = Blockly.JavaScript.valueToCode( block, 'startY', Blockly.JavaScript.ORDER_ATOMIC ); let value_r = Blockly.JavaScript.valueToCode( block, 'R', Blockly.JavaScript.ORDER_ATOMIC ); let fillStyle = Blockly.JavaScript.valueToCode( block, 'fillStyle', Blockly.JavaScript.ORDER_ATOMIC ); let code = ` context.arc(${value_startx}, ${value_starty}, ${value_r}, 0/180*Math.PI,360/180*Math.PI, false); context.fillStyle = ${fillStyle}; context.fill(); ${next} `; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` 200 200 8 #000000 ` }; }38:Td9c,function canvasBlocklyArc(Blockly) { const name = BlocklyCanvasConstants.Arc; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .setAlign(Blockly.ALIGN_CENTRE) .appendField("圆弧"); this.appendValueInput("startX") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X"); this.appendValueInput("startY") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y"); this.appendValueInput("R") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("R"); this.appendValueInput("startAngle") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("起始角"); this.appendValueInput("endAngle") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("结束角"); this.appendValueInput("counterclockwise") .setCheck("Boolean") .setAlign(Blockly.ALIGN_CENTRE) .appendField("逆时针"); this.setOutput(true, null); this.setColour(190); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let value_startx = Blockly.JavaScript.valueToCode( block, 'startX', Blockly.JavaScript.ORDER_ATOMIC ); let value_starty = Blockly.JavaScript.valueToCode( block, 'startY', Blockly.JavaScript.ORDER_ATOMIC ); let value_r = Blockly.JavaScript.valueToCode( block, 'R', Blockly.JavaScript.ORDER_ATOMIC ); let value_startangle = Blockly.JavaScript.valueToCode( block, 'startAngle', Blockly.JavaScript.ORDER_ATOMIC ); let value_endangle = Blockly.JavaScript.valueToCode( block, 'endAngle', Blockly.JavaScript.ORDER_ATOMIC ); let value_counterclockwise = Blockly.JavaScript.valueToCode( block, 'counterclockwise', Blockly.JavaScript.ORDER_NONE ); let code = ` context.arc(${value_startx},${value_starty},${value_r},${value_startangle}/180*Math.PI,${value_endangle}/180*Math.PI,${value_counterclockwise}); ${next} `; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` 0 360 200 200 100 false ` }; }39:Tcb4,function canvasTriangle(Blockly) { const name = BlocklyCanvasConstants.Triangle; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .appendField("三角形"); this.appendValueInput("X1") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X1"); this.appendValueInput("Y1") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y1"); this.appendValueInput("X2") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X2"); this.appendValueInput("Y2") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y2"); this.appendValueInput("X3") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X3"); this.appendValueInput("Y3") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y3"); this.setOutput(true, null); this.setColour(210); this.setTooltip(""); this.setHelpUrl(""); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let value_x1 = Blockly.JavaScript.valueToCode( block, 'X1', Blockly.JavaScript.ORDER_ATOMIC ); let value_y1 = Blockly.JavaScript.valueToCode( block, 'Y1', Blockly.JavaScript.ORDER_ATOMIC ); let value_x2 = Blockly.JavaScript.valueToCode( block, 'X2', Blockly.JavaScript.ORDER_ATOMIC ); let value_y2 = Blockly.JavaScript.valueToCode( block, 'Y2', Blockly.JavaScript.ORDER_ATOMIC ); let value_x3 = Blockly.JavaScript.valueToCode( block, 'X3', Blockly.JavaScript.ORDER_ATOMIC ); let value_y3 = Blockly.JavaScript.valueToCode( block, 'Y3', Blockly.JavaScript.ORDER_ATOMIC ); let code = ` context.moveTo(${value_x1}, ${value_y1}); context.lineTo(${value_x2}, ${value_y2}); context.lineTo(${value_x3}, ${value_y3}); context.lineTo(${value_x1}, ${value_y1}); ${next} `; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` 100 100 100 300 300 300 ` }; }3a:T100a,function canvasBezierCurve(Blockly) { const name = BlocklyCanvasConstants.BezierCurve; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .appendField("贝赛尔曲线"); this.appendValueInput("X1") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X1"); this.appendValueInput("Y1") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y1"); this.appendValueInput("X2") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X2"); this.appendValueInput("Y2") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y2"); this.appendValueInput("X3") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X3"); this.appendValueInput("Y3") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y3"); this.appendValueInput("X4") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X4"); this.appendValueInput("Y4") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y4"); this.setOutput(true, null); this.setColour(230); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let value_x1 = Blockly.JavaScript.valueToCode( block, 'X1', Blockly.JavaScript.ORDER_ATOMIC ); let value_y1 = Blockly.JavaScript.valueToCode( block, 'Y1', Blockly.JavaScript.ORDER_ATOMIC ); let value_x2 = Blockly.JavaScript.valueToCode( block, 'X2', Blockly.JavaScript.ORDER_ATOMIC ); let value_y2 = Blockly.JavaScript.valueToCode( block, 'Y2', Blockly.JavaScript.ORDER_ATOMIC ); let value_x3 = Blockly.JavaScript.valueToCode( block, 'X3', Blockly.JavaScript.ORDER_ATOMIC ); let value_y3 = Blockly.JavaScript.valueToCode( block, 'Y3', Blockly.JavaScript.ORDER_ATOMIC ); let value_x4 = Blockly.JavaScript.valueToCode( block, 'X4', Blockly.JavaScript.ORDER_ATOMIC ); let value_y4 = Blockly.JavaScript.valueToCode( block, 'Y4', Blockly.JavaScript.ORDER_ATOMIC ); let code = ` context.moveTo(${value_x1}, ${value_y1}); context.bezierCurveTo(${value_x2}, ${value_y2}, ${value_x3}, ${value_y3}, ${value_x4}, ${value_y4}); ${next} `; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` 100 100 100 300 300 300 300 100 ` }; }3b:Tce7,function canvasQuadraticCurve(Blockly) { const name = BlocklyCanvasConstants.QuadraticCurve; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .appendField("二次方曲线"); this.appendValueInput("X1") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X1"); this.appendValueInput("Y1") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y1"); this.appendValueInput("X2") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X2"); this.appendValueInput("Y2") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y2"); this.appendValueInput("X3") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X3"); this.appendValueInput("Y3") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y3"); this.setOutput(true, null); this.setColour(250); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let value_x1 = Blockly.JavaScript.valueToCode( block, 'X1', Blockly.JavaScript.ORDER_ATOMIC ); let value_y1 = Blockly.JavaScript.valueToCode( block, 'Y1', Blockly.JavaScript.ORDER_ATOMIC ); let value_x2 = Blockly.JavaScript.valueToCode( block, 'X2', Blockly.JavaScript.ORDER_ATOMIC ); let value_y2 = Blockly.JavaScript.valueToCode( block, 'Y2', Blockly.JavaScript.ORDER_ATOMIC ); let value_x3 = Blockly.JavaScript.valueToCode( block, 'X3', Blockly.JavaScript.ORDER_ATOMIC ); let value_y3 = Blockly.JavaScript.valueToCode( block, 'Y3', Blockly.JavaScript.ORDER_ATOMIC ); let code = ` context.moveTo(${value_x1}, ${value_y1}); context.quadraticCurveTo(${value_x2}, ${value_y2}, ${value_x3}, ${value_y3}); ${next} `; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` 100 100 100 250 400 100 ` }; }3c:T1002,function canvasEllipse(Blockly) { const name = BlocklyCanvasConstants.Ellipse; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .appendField("椭圆"); this.appendValueInput("X") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X"); this.appendValueInput("Y") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y"); this.appendValueInput("RX") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("RX"); this.appendValueInput("RY") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("RY"); this.appendValueInput("rotation") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("旋转角"); this.appendValueInput("startAngle") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("起始角"); this.appendValueInput("endAngle") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("结束角"); this.appendDummyInput() .appendField("逆时针") .appendField( new Blockly.FieldDropdown([ ["假", "false"], ["真", "true"], ]), "anticlockwise" ); this.setInputsInline(false); this.setOutput(true, null); this.setColour(220); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let value_x = Blockly.JavaScript.valueToCode( block, 'X', Blockly.JavaScript.ORDER_ATOMIC ); let value_y = Blockly.JavaScript.valueToCode( block, 'Y', Blockly.JavaScript.ORDER_ATOMIC ); let radiusX = Blockly.JavaScript.valueToCode( block, 'RX', Blockly.JavaScript.ORDER_ATOMIC ); let radiusY = Blockly.JavaScript.valueToCode( block, 'RY', Blockly.JavaScript.ORDER_ATOMIC ); let rotation = Blockly.JavaScript.valueToCode( block, 'rotation', Blockly.JavaScript.ORDER_ATOMIC ); let startAngle = Blockly.JavaScript.valueToCode( block, 'startAngle', Blockly.JavaScript.ORDER_ATOMIC ); let endAngle = Blockly.JavaScript.valueToCode( block, 'endAngle', Blockly.JavaScript.ORDER_ATOMIC ); let dropdown_anticlockwise = block.getFieldValue('anticlockwise'); let code = ` context.ellipse(${value_x}, ${value_y}, ${radiusX}, ${radiusY}, Math.PI / ${rotation}, ${startAngle}, ${endAngle} * Math.PI, ${dropdown_anticlockwise}); ${next} `; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` 100 100 50 75 4 0 2 ` }; }3d:Td9f,function canvasText(Blockly) { const name = BlocklyCanvasConstants.Text; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .setAlign(Blockly.ALIGN_CENTRE) .appendField("文本"); this.appendValueInput("text") .setCheck("String") .setAlign(Blockly.ALIGN_CENTRE) .appendField("文字"); this.appendValueInput("X") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X"); this.appendValueInput("Y") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y"); this.appendValueInput("font") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("字体大小"); this.appendValueInput("fontstyle") .setCheck("Colour") .setAlign(Blockly.ALIGN_CENTRE) .appendField("字体颜色") this.appendDummyInput() .appendField("字体样式") .appendField( new Blockly.FieldDropdown([ ["Arial", "Arial"], ["Verdana", "Verdana"], ["serif", "serif"], ["Comic Sans MS", "Comic Sans MS"], ["Times New Roman", "Times New Roman"], ]), "fontfamily" ); this.setInputsInline(false); this.setOutput(true, null); this.setColour(270); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let text = Blockly.JavaScript.valueToCode( block, 'text', Blockly.JavaScript.ORDER_ATOMIC ); let value_x = Blockly.JavaScript.valueToCode( block, 'X', Blockly.JavaScript.ORDER_ATOMIC ); let value_y = Blockly.JavaScript.valueToCode( block, 'Y', Blockly.JavaScript.ORDER_ATOMIC ); let font = Blockly.JavaScript.valueToCode( block, 'font', Blockly.JavaScript.ORDER_ATOMIC ); let value_fontstyle = Blockly.JavaScript.valueToCode( block, 'fontstyle', Blockly.JavaScript.ORDER_ATOMIC ); let dropdown_fontfamily = block.getFieldValue('fontfamily'); let code = ` context.font = "${font}px ${dropdown_fontfamily}"; context.fillText(${text}, ${value_x}, ${value_y}); context.fillStyle = ${value_fontstyle}; ${next} `; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` Hello World 10 50 30 #000000 ` }; }3e:T1252,function canvasImage(Blockly) { const name = BlocklyCanvasConstants.Image; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .setAlign(Blockly.ALIGN_CENTRE) .appendField("图像"); this.appendValueInput("image") .setCheck("String") .setAlign(Blockly.ALIGN_CENTRE) .appendField("URL"); this.appendValueInput("sx") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("SX"); this.appendValueInput("sy") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("SY"); this.appendValueInput("sWidth") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("SWidth"); this.appendValueInput("sHeight") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("SHeight") this.appendValueInput("dx") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("DX") this.appendValueInput("dy") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("DY") this.appendValueInput("dWidth") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("DWidth") this.appendValueInput("dHeight") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("DHeight") this.setInputsInline(false); this.setOutput(true, null); this.setColour(275); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let image = Blockly.JavaScript.valueToCode( block, 'image', Blockly.JavaScript.ORDER_ATOMIC ); let sx = Blockly.JavaScript.valueToCode( block, 'sx', Blockly.JavaScript.ORDER_ATOMIC ); let sy = Blockly.JavaScript.valueToCode( block, 'sy', Blockly.JavaScript.ORDER_ATOMIC ); let sWidth = Blockly.JavaScript.valueToCode( block, 'sWidth', Blockly.JavaScript.ORDER_ATOMIC ); let sHeight = Blockly.JavaScript.valueToCode( block, 'sHeight', Blockly.JavaScript.ORDER_ATOMIC ); let dx = Blockly.JavaScript.valueToCode( block, 'dx', Blockly.JavaScript.ORDER_ATOMIC ); let dy = Blockly.JavaScript.valueToCode( block, 'dy', Blockly.JavaScript.ORDER_ATOMIC ); let dWidth = Blockly.JavaScript.valueToCode( block, 'dWidth', Blockly.JavaScript.ORDER_ATOMIC ); let dHeight = Blockly.JavaScript.valueToCode( block, 'dHeight', Blockly.JavaScript.ORDER_ATOMIC ); let code = ` var img = new Image(); img.src = ${image}; img.onload = function(){ context.drawImage(img, ${sx}, ${sy}, ${sWidth}, ${sHeight}, ${dx}, ${dy}, ${dWidth}, ${dHeight}); } ${next} `; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` https://mdn.mozillademos.org/files/5397/rhino.jpg 0 0 400 500 50 30 300 400 ` }; }3f:Tcbd,function canvasSetTransform(Blockly) { const name = BlocklyCanvasConstants.SetTransform; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .appendField("设置变换"); this.appendValueInput("X1") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X1"); this.appendValueInput("X2") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X2"); this.appendValueInput("X3") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X3"); this.appendValueInput("X4") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X4"); this.appendValueInput("X5") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X5"); this.appendValueInput("X6") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X6"); this.setOutput(true, null); this.setColour(290); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let value_x1 = Blockly.JavaScript.valueToCode( block, 'X1', Blockly.JavaScript.ORDER_ATOMIC ); let value_x2 = Blockly.JavaScript.valueToCode( block, 'X2', Blockly.JavaScript.ORDER_ATOMIC ); let value_x3 = Blockly.JavaScript.valueToCode( block, 'X3', Blockly.JavaScript.ORDER_ATOMIC ); let value_x4 = Blockly.JavaScript.valueToCode( block, 'X4', Blockly.JavaScript.ORDER_ATOMIC ); let value_x5 = Blockly.JavaScript.valueToCode( block, 'X5', Blockly.JavaScript.ORDER_ATOMIC ); let value_x6 = Blockly.JavaScript.valueToCode( block, 'X6', Blockly.JavaScript.ORDER_ATOMIC ); let code = ` context.setTransform(${value_x1}, ${value_x2}, ${value_x3}, ${value_x4}, ${value_x5}, ${value_x6}); ${next} `; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` 1 0.5 0 1 30 10 ` }; }40:Tcab,function canvasTransform(Blockly) { const name = BlocklyCanvasConstants.Transform; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .appendField("变换"); this.appendValueInput("X1") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X1"); this.appendValueInput("X2") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X2"); this.appendValueInput("X3") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X3"); this.appendValueInput("X4") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X4"); this.appendValueInput("X5") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X5"); this.appendValueInput("X6") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X6"); this.setOutput(true, null); this.setColour(310); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let value_x1 = Blockly.JavaScript.valueToCode( block, 'X1', Blockly.JavaScript.ORDER_ATOMIC ); let value_x2 = Blockly.JavaScript.valueToCode( block, 'X2', Blockly.JavaScript.ORDER_ATOMIC ); let value_x3 = Blockly.JavaScript.valueToCode( block, 'X3', Blockly.JavaScript.ORDER_ATOMIC ); let value_x4 = Blockly.JavaScript.valueToCode( block, 'X4', Blockly.JavaScript.ORDER_ATOMIC ); let value_x5 = Blockly.JavaScript.valueToCode( block, 'X5', Blockly.JavaScript.ORDER_ATOMIC ); let value_x6 = Blockly.JavaScript.valueToCode( block, 'X6', Blockly.JavaScript.ORDER_ATOMIC ); let code = ` context.transform(${value_x1}, ${value_x2}, ${value_x3}, ${value_x4}, ${value_x5}, ${value_x6}); ${next} `; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` 1 0.5 0 1 30 10 ` }; }41:T64a,function canvasTranslate(Blockly) { const name = BlocklyCanvasConstants.Translate; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .appendField("平移"); this.appendValueInput("X") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X"); this.appendValueInput("Y") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y"); this.setOutput(true, null); this.setColour(330); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let value_x = Blockly.JavaScript.valueToCode( block, 'X', Blockly.JavaScript.ORDER_ATOMIC ); let value_y = Blockly.JavaScript.valueToCode( block, 'Y', Blockly.JavaScript.ORDER_ATOMIC ); let code = ` context.translate(${value_x}, ${value_y}); ${next} `; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` 100 30 ` }; }42:T638,function canvasScale(Blockly) { const name = BlocklyCanvasConstants.Scale; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .appendField("缩放"); this.appendValueInput("X") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("X"); this.appendValueInput("Y") .setCheck("Number") .setAlign(Blockly.ALIGN_CENTRE) .appendField("Y"); this.setOutput(true, null); this.setColour(350); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let value_x = Blockly.JavaScript.valueToCode( block, 'X', Blockly.JavaScript.ORDER_ATOMIC ); let value_y = Blockly.JavaScript.valueToCode( block, 'Y', Blockly.JavaScript.ORDER_ATOMIC ); let code = ` context.scale(${value_x}, ${value_y}); ${next} `; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` -1 1 ` }; }43:Tca3,function canvasClock(Blockly) { const name = BlocklyCanvasConstants.Clock; Blockly.Blocks[name] = { init: function() { this.appendValueInput("next") .setCheck(null) .appendField("时钟"); this.setOutput(true, null); this.setColour(360); this.setTooltip(""); this.setHelpUrl("https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations"); } }; Blockly.JavaScript[name] = function(block) { let next = Blockly.JavaScript.valueToCode( block, 'next', Blockly.JavaScript.ORDER_NONE ); let code = ` function clock() { var now = new Date(); var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); ctx.clearRect(0, 0, 150, 150); ctx.translate(75, 75); ctx.scale(0.4, 0.4); ctx.rotate(-Math.PI / 2); ctx.strokeStyle = 'black'; ctx.fillStyle = 'white'; ctx.lineWidth = 8; ctx.lineCap = 'round'; // Hour marks ctx.save(); for (var i = 0; i < 12; i++) { ctx.beginPath(); ctx.rotate(Math.PI / 6); ctx.moveTo(100, 0); ctx.lineTo(120, 0); ctx.stroke(); } ctx.restore(); // Minute marks ctx.save(); ctx.lineWidth = 5; for (i = 0; i < 60; i++) { if (i % 5!= 0) { ctx.beginPath(); ctx.moveTo(117, 0); ctx.lineTo(120, 0); ctx.stroke(); } ctx.rotate(Math.PI / 30); } ctx.restore(); var sec = now.getSeconds(); var min = now.getMinutes(); var hr = now.getHours(); hr = hr >= 12 ? hr - 12 : hr; ctx.fillStyle = 'black'; // write Hours ctx.save(); ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec); ctx.lineWidth = 14; ctx.beginPath(); ctx.moveTo(-20, 0); ctx.lineTo(80, 0); ctx.stroke(); ctx.restore(); // write Minutes ctx.save(); ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec); ctx.lineWidth = 10; ctx.beginPath(); ctx.moveTo(-28, 0); ctx.lineTo(112, 0); ctx.stroke(); ctx.restore(); // Write seconds ctx.save(); ctx.rotate(sec * Math.PI / 30); ctx.strokeStyle = '#D40000'; ctx.fillStyle = '#D40000'; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(-30, 0); ctx.lineTo(83, 0); ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, 10, 0, Math.PI * 2, true); ctx.fill(); ctx.beginPath(); ctx.arc(95, 0, 10, 0, Math.PI * 2, true); ctx.stroke(); ctx.fillStyle = 'rgba(0, 0, 0, 0)'; ctx.arc(0, 0, 3, 0, Math.PI * 2, true); ctx.fill(); ctx.restore(); ctx.beginPath(); ctx.lineWidth = 14; ctx.strokeStyle = '#325FA2'; ctx.arc(0, 0, 142, 0, Math.PI * 2, true); ctx.stroke(); ctx.restore(); window.requestAnimationFrame(clock); } window.requestAnimationFrame(clock); ${next} `; return [code, Blockly.JavaScript.ORDER_NONE]; }; return { kind: "block", blockxml: ` ` }; }44:[] 2e:{"id":"46d49e4256701ef3","slug":"blockly-canvas-extensions","title":"Blockly Canvas Extensions","thumbnail":"5d79a77a01c553d86212dc0e5aaeb3eef67969e8557d201763b8faf6a618c8b9","access_level":"public","create_time":"$D2021-03-06T11:32:33.801Z","update_time":"$D2021-03-22T03:13:03.138Z","view_time":null,"first_public_time":"$D2021-03-06T11:58:44.327Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"2a278c3908e45a90","login":"fengyfei","name":"Feng Yifei","avatar_url":"https://avatars-next.observableusercontent.com/c5b93e151f999a0d3ae3ddc3285ea44aaaaf234cd045885cc92d8c1d0a529148","tier":"starter_2024"},"version":188,"publish_version":188,"role":null,"authored":false,"authors":[{"type":"individual","id":"582cdf51952494b0","login":"fengyfei","name":"Feng Yifei","avatar_url":"https://avatars-next.observableusercontent.com/c5b93e151f999a0d3ae3ddc3285ea44aaaaf234cd045885cc92d8c1d0a529148","tier":null}],"members":[{"type":"individual","id":"582cdf51952494b0","login":"fengyfei","name":"Feng Yifei","avatar_url":"https://avatars-next.observableusercontent.com/c5b93e151f999a0d3ae3ddc3285ea44aaaaf234cd045885cc92d8c1d0a529148","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"90f11efad445a3de","slug":"tools","title":"Tools","owner":{"id":"2a278c3908e45a90","login":"fengyfei","name":"Feng Yifei"}},"type":"notebook","body":{"titling":"auto","title":"Blockly Canvas Extensions","cells":[{"id":0,"value":"md`# Blockly Canvas Extensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`## Constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"BlocklyCanvasConstants = {\n return {\n BeginPath: 'beginpath',\n ClosePath: 'closepath',\n MoveTo: 'moveto',\n LineTo: 'lineto',\n Save: 'save',\n Restore: 'restore',\n Stroke: 'stroke',\n Fill: 'fill',\n Rect: 'rect',\n Quad: 'quad',\n Arc: 'arc',\n Point: 'point',\n Triangle: 'triangle',\n BezierCurve: 'bezierCurve',\n QuadraticCurve: 'quadraticCurve',\n Ellipse: 'ellipse',\n Text: 'text',\n Image: 'image',\n SetTransform: 'setTransform',\n Transform: 'transform',\n Translate: 'translate',\n Scale: 'scale',\n Clock: 'clock',\n GlobalStyle: 'globalStyle',\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Register`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`## Methods`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`### Global Style`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`### Begin Path`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`### ClosePath`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"function canvasClosePath(Blockly) {\n const name = BlocklyCanvasConstants.ClosePath;\n\n Blockly.Blocks[name] = {\n init: function() {\n this.appendDummyInput().appendField(\"结束路径\");\n this.setInputsInline(false);\n this.setOutput(true, null);\n this.setColour(30);\n this.setTooltip(\"\");\n this.setHelpUrl(\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath\");\n }\n };\n\n Blockly.JavaScript[name] = function(block) {\n let code = `\n context.closePath();`;\n\n return [code, Blockly.JavaScript.ORDER_NONE];\n };\n\n return {\n kind: \"block\",\n blockxml: ` `\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`### Move To`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`### Line To`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`### Save`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"function canvasSave(Blockly) {\n const name = BlocklyCanvasConstants.Save\n\n Blockly.Blocks[name] = {\n init: function() {\n this.appendValueInput('next').appendField(\"保存\");\n this.setInputsInline(false);\n this.setOutput(true, null);\n this.setColour(90);\n this.setTooltip(\"\");\n this.setHelpUrl(\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save\");\n }\n };\n\n Blockly.JavaScript['save'] = function(block) {\n let next = Blockly.JavaScript.valueToCode(\n block,\n 'next',\n Blockly.JavaScript.ORDER_NONE\n );\n let code = `\n context.save();\n ${next}\n `;\n\n return [code, Blockly.JavaScript.ORDER_NONE];\n };\n\n return {\n kind: \"block\",\n blockxml: ` `\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`### Restore`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"function canvasRestore(Blockly) {\n const name = BlocklyCanvasConstants.Restore;\n\n Blockly.Blocks[name] = {\n init: function() {\n this.appendValueInput('next').appendField(\"还原\");\n this.setInputsInline(false);\n this.setOutput(true, null);\n this.setColour(110);\n this.setTooltip(\"\");\n this.setHelpUrl(\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore\");\n }\n };\n\n Blockly.JavaScript['restore'] = function(block) {\n let next = Blockly.JavaScript.valueToCode(\n block,\n 'next',\n Blockly.JavaScript.ORDER_NONE\n );\n let code = `\n context.restore();\n ${next}\n `;\n\n return [code, Blockly.JavaScript.ORDER_NONE];\n };\n\n return {\n kind: \"block\",\n blockxml: ` `\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`### Stroke`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"function canvasStroke(Blockly) {\n const name = BlocklyCanvasConstants.Stroke;\n\n Blockly.Blocks[name] = {\n init: function() {\n this.appendValueInput('next').appendField(\"描绘\");\n this.setInputsInline(false);\n this.setOutput(true, null);\n this.setColour(130);\n this.setTooltip(\"\");\n this.setHelpUrl(\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke\");\n }\n };\n\n Blockly.JavaScript['stroke'] = function(block) {\n let next = Blockly.JavaScript.valueToCode(\n block,\n 'next',\n Blockly.JavaScript.ORDER_NONE\n );\n let code = `\n context.stroke();\n ${next}\n `;\n\n return [code, Blockly.JavaScript.ORDER_NONE];\n };\n\n return {\n kind: \"block\",\n blockxml: ` `\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md`### Fill`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"function canvasFill(Blockly) {\n const name = BlocklyCanvasConstants.Fill;\n\n Blockly.Blocks[name] = {\n init: function() {\n this.appendValueInput('next').appendField(\"填充\");\n this.setInputsInline(false);\n this.setOutput(true, null);\n this.setColour(150);\n this.setTooltip(\"\");\n this.setHelpUrl(\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill\");\n }\n };\n\n Blockly.JavaScript['fill'] = function(block) {\n let next = Blockly.JavaScript.valueToCode(\n block,\n 'next',\n Blockly.JavaScript.ORDER_NONE\n );\n let code = `\n context.fill();\n ${next}\n `;\n\n return [code, Blockly.JavaScript.ORDER_NONE];\n };\n\n return {\n kind: \"block\",\n blockxml: ` `\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`### Rect`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md`### Quad`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"md`### Point`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`### Arc`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`### Triangle`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`### BezierCurve`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`### QuadraticCurve`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`### Ellipse`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"md`### Text`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md`### Image`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`### SetTransform`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md`### Transform`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md`### Translate`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"$41","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`### Scale`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$42","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`### Clock`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"1"}} 2f:"$2e:body"