canvas入门

最新推荐文章于 2022-10-14 11:34:42 发布

builder2991

最新推荐文章于 2022-10-14 11:34:42 发布

阅读量173

点赞数 4

分类专栏： html5 文章标签： canvas 前端

本文链接：https://blog.csdn.net/low666/article/details/97412503

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

canvas入门

创建Canvas元素

向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：

    <canvas id="myCanvas" width="200" height="100"></canvas>

Canvas坐标系

通过JavaScript来绘制

    /*获取元素*/
    var myCanvas = document.querySelector('#myCanvas');
    /*获取绘图工具*/
    var context = myCanvas.getContext('2d');
    /*设置绘图的起始位置*/
    context.moveTo(100,100);
    /*绘制路径*/
    context.lineTo(200,200);
    /*描边*/
    context.stroke();

Canvas的基本使用

图形绘制

需要理解些概念：

路径的概念
路径的绘制
- 描边 stroke()
- 填充 fill()
闭合路径
- 手动闭合
- 程序闭合 closePath()
填充规则(非零环绕)
开启新的路径 beginPath()

设置样式

画笔的状态
- lineWidth 线宽，默认1px
- lineCap 线末端类型：(butt默认)、round、square
- lineJoin 相交线的拐点 miter(默认)、round、bevel
- strokeStyle 线的颜色
- fillStyle 填充颜色
- setLineDash() 设置虚线
- getLineDash() 获取虚线宽度集合
- lineDashOffset 设置虚线偏移量（负值向右偏移）

基础代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<!--准备画布-->
<!--  画布是白色的 而且默认300*150-->
<!--  设置画布的大小  width="600" height="400" -->
<canvas width="600" height="400" ></canvas>
<!--准备绘制工具-->
<!--利用工具绘图-->
<script>
    /*获取元素*/
    var myCanvas = document.querySelector('canvas');
    /*获取上下文 绘制工具箱 */
    var ctx = myCanvas.getContext('2d');
    /*移动画笔*/
    ctx.moveTo(100,100);
    /*绘制直线 (轨迹，绘制路径)*/
    ctx.lineTo(200,100);
    /*描边*/
    ctx.stroke();
</script>
</body>
</html>

builder2991

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas入门

canvas入门创建Canvas元素向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度： <canvas id="myCanvas" width="200" height="100"></canvas>Canvas坐标系通过JavaScript来绘制 /*获取元素*/ var myCanvas = document...
复制链接

扫一扫

专栏目录