为了账号安全,请及时绑定邮箱和手机立即绑定

JS学习:测试一下imooc markdown的run代码功能

发现imooc markdown的代码运行功能,感觉不错。但是貌似没找到使用说明。为了能更好的了解该功能,测试一下:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        html,body {margin:0;height:100%;overflow:hidden;}
    </style>
    <meta charset="UTF-8">
    <title>随风而行之青衫磊落险峰行测试imooc的markdown run功能</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border: 1px solid black">
    你的浏览器还不支持哦
</canvas>
</body>
<script>
    function drawGrid(backcolor,color, stepx, stepy) {
        context.save()

        context.strokeStyle = color;
        context.fillStyle = backcolor;
        context.lineWidth = 0.5;
        context.fillRect(0, 0, context.canvas.width, context.canvas.height);
        context.globalAlpha = 0.1;

        context.beginPath();
        for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
            context.moveTo(i, 0);
            context.lineTo(i, context.canvas.height);
        }
        context.stroke();

        context.beginPath();
        for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
            context.moveTo(0, i);
            context.lineTo(context.canvas.width, i);
        }

        context.stroke();

        context.restore();
    }

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

    drawGrid('black','white',10,10);
</script>
</html>

期待一下是否能在markdown run中正常运行,显示出canvas2d绘制出来的黑色背景网格

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 1
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消