JavaScript Sandbox

JavaScript 沙箱 (JavaScript Sandbox) -- 用 eval 執行 javascript (ver 1.05)(2020-11-13 updated)
底下是指令碼

function drawLine(cx,cy,radius,degree)
{
  ctx.beginPath();
  var radian=degree/180*Math.PI;
  ctx.moveTo(cx,cy);
  ctx.lineTo(cx+radius*Math.cos(radian),cy+radius*Math.sin(radian));
  ctx.stroke();
  ctx.closePath();
}

function drawSomeLine(cx,cy,radius1,radius2,degree)
{
  var radian=degree/180*Math.PI;
  
  var x1=cx+radius1*Math.cos(radian);
  var y1=cy+radius1*Math.sin(radian);
  
  var x2=cx+radius2*Math.cos(radian);
  var y2=cy+radius2*Math.sin(radian);
  
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  ctx.closePath();
}

function drawOneLine(cx,cy,radius1,degree1,radius2,degree2)
{
  var radian1=degree1/180*Math.PI;
  var radian2=degree2/180*Math.PI;
  
  var x1=cx+radius1*Math.cos(radian1);
  var y1=cy+radius1*Math.sin(radian1);
  
  var x2=cx+radius2*Math.cos(radian2);
  var y2=cy+radius2*Math.sin(radian2);
  
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  ctx.closePath();
}

function drawRotatedText(dX, dY, strWords, dDegree)
{
  gebi("divMeasureInline_htm").style.fontFamily = strFontFamily;
  gebi("divMeasureInline_htm").style.fontSize = strFontSize;
  gebi("divMeasureInline_htm").style.fontWeight = strFontWeight;
  gebi("divMeasureInline_htm").innerHTML = strWords;
  var dWidth=gebi("divMeasureInline_htm").offsetWidth;
  var dHeight=gebi("divMeasureInline_htm").offsetHeight;
  gebi("divMeasureInline_htm").innerHTML = "";
  
  ctx.save();
  
  ctx.translate(dX, dY);
  ctx.rotate(dDegree * Math.PI / 180);
  
  //ctx.lineWidth = 1;
  //ctx.strokeStyle = "#000000";
  //ctx.strokeRect(-dWidth/2, -dHeight/2, dWidth, dHeight);
  //ctx.stroke();
  
  ctx.textBaseline = "top";
  ctx.font
    = strFontWeight + " " 
    + strFontSize + " "
    + strFontFamily;
  ctx.fillStyle = strFontColor;
  ctx.fillText(strWords, -dWidth/2, -dHeight/2);
  
  ctx.restore();
}

function clearAll()
{
  ctx.fillStyle="#ffffff";
  ctx.fillRect(0,0,canvas.width,canvas.height); 
}

function copyToPreview()
{
  ctxPreview.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, canvasPreview.width, canvasPreview.height);
}

function getStrValueExtractedFromAttribute(strAttribute)
{
  var iIdx=strAttribute.indexOf("=");
  if(iIdx<0) { return ""; }
  return strAttribute.substring(iIdx+1).trim();
}

}

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

var canvasPreview=document.getElementById("myCanvasPreview");
var ctxPreview=canvasPreview.getContext("2d");

// 清空畫面(歸零)
canvas.width=canvas.width;
ctx.lineWidth=2;

var cx=canvas.width/2;
var cy=canvas.height/2;
var r=500;
var strFontFamily="標楷體";
var strFontSize="48pt";
var strFontWeight="normal";
var strFontColor="#000000";
var iFontWidthFor0864=40; // pixels

clearAll();

runOtherInput();
//exampleCode01();
//exampleCode02();

copyToPreview();

底下是額外輸入盒

# 井字號開頭為註解

字型大小; 大小=48pt

字型顏色; 顏色=#feacdb

字型名稱; 名稱=標楷體

卦象大小; 大小=60

畫圓; 半徑=250

畫放射線; 內徑=400; 外徑=500; 起始度數=0; 間隔度數=15; 終止度數=360

畫字 / 畫不旋轉字; 半徑=450; 起始度數=7.5; 間隔度數=15; 終止度數=360; 文字=一,二,三,四,五,六,七,八,九,十,壹,貳,參,肆,伍,陸,柒,扒,玖,石,甲,乙,丙,丁

畫八卦 / 畫不旋轉八卦; 半徑=550; 起始度數=0; 間隔度數=45; 終止度數=360; 索引=7,2,3,4,1,0,5,6

畫六十四卦 / 畫不旋轉六十四卦; 半徑=620; 起始度數=15; 間隔度數=30; 終止度數=360; 索引=7,63,20,18,9,43,11,36,9,10,11,12

畫斜線; 半徑1=620; 度數1=-10; 半徑2=620; 度數2=190

下圖為預覽畫面

下圖為實際畫面

執行 eval( (function () { ......script here...... })() );