canvas的简单使用介绍以及简单应用canvas绘制按钮样式

最新推荐文章于 2023-04-28 11:01:00 发布

sk1tlz

最新推荐文章于 2023-04-28 11:01:00 发布

阅读量2.9k

点赞数

文章标签： canvas html js

本文链接：https://blog.csdn.net/ruienger/article/details/108244768

版权

canvas简单使用

在使用canvas之前，我们需要了解canvas是什么
画布 canvas是一个标签、容器，用来接受画布元素，其本身不能绘制图形，需要js绘制图形放入canvas中显示
既然canvas是一个标签，那就意味着我们需要把canvas标签加入html中，我们在html里写一个canvas标签并设置宽高（canvas宽高通过属性设置而不是css样式），然后添加一个边框让它更显眼一点

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>矩形</title>
    <style>
        canvas{
    
            border: 1px solid yellowgreen;
        }
    </style>
</head>
<body>
    <canvas height='500' width="500"></canvas>
</body>

接下来开始绘制图形（包括矩形、圆形、渐变、文字，不包括图片）
使用canvas绘制矩形

	// 获取canvas对象
    var canvas = document.querySelector('canvas')
    // 获取2d上下文
    var context = canvas.getContext('2d')
    // 设置样式 填充样式、描边样式
    context.fillStyle = 'red'
    context.strokeStyle = 'blue'
    // 设置线宽
    context.lineWidth = '2'
    // 开始绘制图形 下面三个方法的参数分别在代表起点x值、y值，宽、高
    //填充矩形 填充样式为红色
    context.fillRect(0,0,200,200)
    //描边矩形 描边样式为蓝色
    context.strokeRect(200,200,100

最低0.47元/天解锁文章

sk1tlz

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
canvas的简单使用介绍以及简单应用canvas绘制按钮样式

canvas简单使用在使用canvas之前，我们需要了解canvas是什么画布 canvas是一个标签、容器，用来接受画布元素，其本身不能绘制图形，需要js绘制图形放入canvas中显示既然canvas是一个标签，那就意味着我们需要把canvas标签加入html中，我们在html里写一个canvas标签并设置宽高（canvas宽高通过属性设置而不是css样式），然后添加一个边框让它更显眼一点<head> <meta charset="UTF-8"> <m
复制链接

扫一扫