简单的canvas实用小case1

莫奈的日出

已于 2022-06-15 16:04:09 修改

阅读量163

点赞数

文章标签： css css3 html

于 2022-06-13 21:22:33 首次发布

本文链接：https://blog.csdn.net/weixin_52993364/article/details/125267227

版权

本文介绍了HTML5中的canvas元素，它是一个用于图形绘制的画布，无需外部插件即可运行。canvas提供了图形处理、文字绘制、图像操作等功能，并通过JavaScript实现图形绘制。文章通过三个案例展示了如何绘制五角星、随机矩形和随机弧形，强调了正确设置canvas尺寸以避免图像失真的重要性。

摘要由CSDN通过智能技术生成

canvas是什么？

1.是HTML5中重要的元素,和audio、video元素类似完全不需要任何外部插件就能够运行.

2.Canvas中文翻译就是”画布”.它提供了强大的图形的处理功能(绘制,变换,像素处理…)。

3.但是需要注意，canvas 元素本身并不绘制图形，它只是相当于一张空画布。

4.如果开发者需要向 canvas 上绘制图形，则必须使用 JavaScript 脚本进行绘制。

canvas能够做什么？

基础图形的绘制
文字的绘制
图形的变形和图片的合成
图片和视频的处理
动画的实现
小游戏的制作

接下来就展示一些用canvas绘制的基础图形：

案例一：绘制五角星

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            box-shadow: 0 0 10px gray;
        }
    </style>
</head>

<body>
    <canvas width="500" height="500"></canvas>
</body>
<script>
    // 1.获取canvas标签
    var canvas = document.querySelector('canvas');
    // 2.获取canvas的上下文环境
    var ctx = canvas.getContext('2d'