HTML5 canvas 基本的线条绘制

最新推荐文章于 2023-05-24 18:09:09 发布

奋斗的小小ц

最新推荐文章于 2023-05-24 18:09:09 发布

阅读量318

点赞数

分类专栏： HTML5 canvas JavaScript 文章标签： HTML5学习 canvas 线条矩形填充

本文链接：https://blog.csdn.net/qq_44812507/article/details/102526705

版权

HTML5 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

HTML5 canvas 基本的线条绘制

实现结果

在这里插入图片描述

话不多说，直接上代码

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>JavaScript Canvas</title>
    <script type="text/javascript">
        window.onload = function() {							// 资源加载结束后触发
            var canvas = document.querySelector("canvas");	// 获取canvas元素
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");				// 获取渲染上下文
                // TODO: lineTo()
                ctx.beginPath();               //起始路径
                ctx.moveTo(50, 50);            //添加起点
                ctx.lineTo(50, 150);           //终点
                ctx.lineTo(150, 150);          //终点
                ctx.moveTo(50, 150);           //起点
                ctx.lineTo(150, 50);           //终点
                ctx.stroke();                  //绘制路径
                // TODO: arcTo()
                ctx.beginPath();
                ctx.moveTo(50, 50);            // 创建开始点
                ctx.lineTo(150, 50);            // 创建水平线
                ctx.arcTo(200,50,200,100,50);  
                // 创建弧（以起点200，50及200，100为终点的直线作为切线，半径为50）
                ctx.stroke();                   // 进行绘制
                // TODO: arc()
                ctx.beginPath();
                ctx.arc(200, 150, 50, 1.0 * Math.PI, 2.0 * Math.PI, true);
                //以200，50作为圆心，起始角为 1.0 * Math.PI，结束角为2*PI,true表示逆时针
                ctx.stroke();
                // TODO: rect()
                ctx.beginPath();
                ctx.rect(200, 100, 50, 50);  //定义一个矩形起点为200，100长宽为50
                ctx.stroke();
                // TODO: fillRect()
                ctx.beginPath();
                ctx.fillStyle = "rgb(128,128,128)";
                ctx.fillRect(150, 100, 50, 50);//绘制填充矩形，填充一个矩形起点为为150，100长宽为50
                // TODO: strokeRect()
                ctx.beginPath();
                ctx.strokeRect(150, 100, 100, 100);//绘制一个矩形定义一个矩形起点为150，100长宽为100
            }
        }
    </script>
</head>
<body>
    <!-- 添加文档主体内容 -->
    <header>
        <nav>画布canvas工具 - 绘制图形</nav>
    </header>
    <hr>
    <!-- 矩形 Canvas画布 设置区 -->
    <canvas width="500" height="300">浏览器不支持画布canvas工具!</canvas>
</body>
</html>

奋斗的小小ц

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 canvas 基本的线条绘制

HTML5 canvas 基本的线条绘制实现结果话不多说，直接上代码<!doctype html><html lang="en"><head> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>JavaScript Canva...
复制链接

扫一扫