hujunhua 发表于 2024-7-28 09:14:58

论坛如何支持HTML5 Canvas？

像包含24個正方形和24個等腰直角三角形的方形对称图案这样的帖子中的网格图，是很容易用Canvas来画的，我试了一下不成功，不知道在我们论坛怎么搞才行。现在的浏览器一般都是支持canvas的。

gxqcn 发表于 2024-7-28 10:28:35

测试 HTML5 Canvas

<canvas id="tutorial" width="300" height="300"></canvas>
<script type="text/javascript">
function draw(){
    var canvas = document.getElementById('tutorial');
    if(!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(200,0,0)";
      //绘制矩形
    ctx.fillRect (10, 10, 55, 50);

    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
}
draw();
</script>

gxqcn 发表于 2024-7-28 10:34:47

论坛是支持的，需要发贴时，点开“附加选项”，勾选“HTML 代码”。

但开启 HTML 代码权限，是高风险的。
目前，仅高级管理人员，以及部分版块支持。

hujunhua 发表于 2024-7-28 11:13:40

<canvas id="grid" width="250" height="250"></canvas>
<script type="text/javascript">
function draw(){
    var canvas = document.getElementById('grid');
    if(!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
   //绘制网格点阵   
for (var x =0; x <13; x++) {
      for (var y =0; y <13; y++) {
      ctx.lineWidth = 0.5;
      ctx.beginPath();
      // 绘制水平线段
      let t=20;
      ctx.moveTo(3+x * t , 5+y *t);
      ctx.lineTo(7+x * t, 5+y *t);
      // 绘制垂直线段
      ctx.moveTo(5+x * t, y * t +3);
      ctx.lineTo(5+x * t, y *t + 7);
      ctx.strokeStyle = 'Black';
      ctx.stroke();
      }
    }

//绘制网格
    {
    let s=5;
    let t=20
    let r=s+12*t
    ctx.beginPath();
    ctx.strokeStyle = 'Blue';
    ctx.lineWidth = 2.5;
    ctx.rect(s, s, 12*t, 12*t);
   
    ctx.rect(s+t, s+t, 10*t, 10*t);
   
    ctx.moveTo(s, s+4*t);
    ctx.lineTo(r,s+4*t);
    ctx.lineTo(s+8*t,s);
    ctx.lineTo(s+8*t,r);
    ctx.lineTo(r,s+8*t);
    ctx.lineTo(s,s+8*t);
    ctx.lineTo(s+4*t,r);
    ctx.lineTo(s+4*t,s);
    ctx.lineTo(s,s+4*t);
    ctx.moveTo(s+4*t,s+6*t);
    ctx.lineTo(s+6*t,s+4*t);
    ctx.lineTo(s+8*t,s+6*t);
    ctx.lineTo(s+6*t,s+8*t);
    ctx.lineTo(s+4*t,s+6*t);
    ctx.stroke();
   }
}
draw();
</script>
页: [1]
查看完整版本: 论坛如何支持HTML5 Canvas？