学习canvas画布

╰半夏微凉° 2024-04-20 10:51 58阅读 0赞

我们可以用画布（Canvas）绘制各种图形，下面代码是绘制的一个圆形：

<!DOCTYPE html>
    <html>
        <head>
            <title>Canvas画布</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>
                #canvas{
         width: 200px; height: 200px; border: 1px solid #d3d3d3;}
            </style>
        </head>
        <body>
            <div>绘制一个圆</div>
            <canvas id="canvas">您的浏览器不支持HTML5 canvas 标签。</canvas>
            <script>
                var canvas=document.getElementById("canvas");
                canvas.width=200;
                canvas.height=200;
                var context=canvas.getContext("2d");
                context.beginPath();
                context.arc(100,50,50,0,2*Math.PI);
                context.stroke();
            </script>
        </body>
    </html>

HTML5标准规范：[HTML5标准规范][HTML5]

HTML5代码规范：[HTML5代码规范][HTML5 1]

[HTML5 canvas绘制图片模糊的问题][HTML5 canvas]

[HTML5 canvas绘制图片模糊的问题2][HTML5 canvas_2]

转载于:https://www.cnblogs.com/hool/p/11281619.html

[HTML5]: https://blog.csdn.net/aaa333qwe/article/details/77440928
[HTML5 1]: https://www.runoob.com/html/html5-syntax.html
[HTML5 canvas]: https://segmentfault.com/q/1010000002391424/a-1020000002391631
[HTML5 canvas_2]: https://www.jianshu.com/p/4c4312dc7fc5

发表评论取消回复

表情：

评论列表（有 0 条评论，58人围观）

还没有评论，来说两句吧...

相关阅读

相关学习canvas画布

们可以用画布（Canvas）绘制各种图形，下面代码是绘制的一个圆形： <!DOCTYPE html> <html> <head> ...

╰半夏微凉°/ 2024年04月20日 10:51/ 0 赞/ 59 阅读

相关 Android Canvas画布

在本教程中，我们将讨论 Android 的一个非常重要的部分，即 Canvas。这是每个开发人员都喜欢远离的领域。本教程的目的是让您更加了解和轻松使用 Android Canv

一时失言乱红尘/ 2023年10月01日 12:51/ 0 赞/ 5 阅读

相关 canvas画布

canvas标签 <canvas></canvas> 接下来使用支持H5的浏览器打开该页面，将会看到如下内容： ![在这里插入图片描述][watermark

系统管理员/ 2023年08月17日 16:25/ 0 赞/ 127 阅读

相关 HTML5 canvas 画布

画布 canvas 与 svg canvas 能够做什么？创建一块小画布（canvas）创建画笔（getC

秒速五厘米/ 2023年06月22日 05:19/ 0 赞/ 15 阅读

相关 canvas-画布

概述 HTML5 的 canvas 元素用于定义画布，是一个矩形区域，默认颜色为白色，默认大小为 300 \ 150；通过 JavaScript 可以在该区域上绘制图像

浅浅的花香味﹌/ 2023年06月16日 08:23/ 0 赞/ 23 阅读

相关 HTML5的学习之canvas画布(三)

HTML5的学习之canvas画布上篇博客主要讲解了canvas线条有关的一些属性和方法。这篇文章我们继续学习canvas有关图形绘制的方法。 1.矩形 <tabl

ゞ浴缸里的玫瑰/ 2023年02月17日 14:26/ 0 赞/ 8 阅读

相关 HTML5的学习之canvas画布(一)

HTML5的学习之canvas画布前面几篇博客我们一直在讲如何使用canvas绘制一下图片，但是没有讲过canvas如何使用，都有哪些属性，方法等。今天我们就来讲一讲c

Dear 丶/ 2023年02月17日 14:24/ 0 赞/ 24 阅读

相关 html画布动画,HTML5画布CANVAS动画。

就剩那两个大半圆不知道怎么用代码表示了，求大神给看下，怎么设置的才可以以自己的圆心来转。实现旋转的八卦。不能上传视频，有个转的过程图，在最下面。 your browser d

柔光的暖阳◎/ 2022年10月06日 11:45/ 0 赞/ 311 阅读

相关 HTML5学习笔记（三）canvas画布基础

一、基本内容 Canvas在HTML页面提供画布的功能，在画布中绘制各种图形 Canvas绘制的图形与HTML页面无关，无法通过DOM获取绘制

分手后的思念是犯贱/ 2022年04月17日 00:26/ 0 赞/ 335 阅读

相关 canvas画布实现放大镜

![70][] <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U

Myth丶恋晨/ 2021年09月16日 04:22/ 0 赞/ 476 阅读