html5 canvas绘图的基本使用方法

发布时间:2020-10-22 17:46:23 来源:亿速云 阅读:66 作者:Leah 栏目:移动开发

本篇文章为大家展示了html5 canvas绘图的基本使用方法,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

绘制线段moveTo()和lineTo()

以下是一个简单的<canvas>绘图示例:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas绘图演示</title>

    <style type="text/css">

        #canvas{

            border: 1px solid #ADACB0;

            display: block;

            margin: 20px auto;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="300" height="300">

        你的浏览器还不支持canvas

    </canvas>

</body>

<script type="text/javascript">

    var canvas = document.getElementById("canvas");

    var context = canvas.getContext("2d");

    //设置对象起始点和终点

    context.moveTo(10,10);

    context.lineTo(200,200);

    //设置样式

    context.lineWidth = 2;

    context.strokeStyle = "#F5270B";

    //绘制

    context.stroke();

</script>

</html>

绘制五角星

var canvas = document.getElementById("canvas");

    var context = canvas.getContext("2d");

    context.beginPath();

    //设置是个顶点的坐标,根据顶点制定路径

    for (var i = 0; i < 5; i++) {

        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,

                        -Math.sin((18+i*72)/180*Math.PI)*200+200);

        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,

                        -Math.sin((54+i*72)/180*Math.PI)*80+200);

    }

    context.closePath();

    //设置边框样式以及填充颜色

    context.lineWidth="3";

    context.fillStyle = "#F6F152";

    context.strokeStyle = "#F5270B";

    context.fill();

    context.stroke();

上述内容就是html5 canvas绘图的基本使用方法,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

免费拨打  400 100 2938 免费拨打 400 100 2938
24小时售后技术支持 24小时售后技术支持
返回顶部 返回顶部