学习canvas画布

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Canvas画布</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <style>
  8.             #canvas{
  9.      width: 200px; height: 200px; border: 1px solid #d3d3d3;}
  10.         </style>
  11.     </head>
  12.     <body>
  13.         <div>绘制一个圆</div>
  14.         <canvas id="canvas">您的浏览器不支持HTML5 canvas 标签。</canvas>
  15.         <script>
  16.             var canvas=document.getElementById("canvas");
  17.             canvas.width=200;
  18.             canvas.height=200;
  19.             var context=canvas.getContext("2d");
  20.             context.beginPath();
  21.             context.arc(100,50,50,0,2*Math.PI);
  22.             context.stroke();
  23.         </script>
  24.     </body>
  25. </html>

HTML5标准规范：HTML5标准规范

HTML5代码规范：HTML5代码规范

HTML5 canvas绘制图片模糊的问题

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

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

发表评论

表情：
评论列表 （有 0 条评论，159人围观）

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

相关阅读

    相关 Android Canvas画布

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

    一时失言乱红尘一时失言乱红尘/ 0 赞/ 128 阅读

    相关 canvas画布

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

    系统管理员系统管理员/ 0 赞/ 210 阅读

    相关 canvas-画布

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

    浅浅的花香味﹌浅浅的花香味﹌/ 0 赞/ 123 阅读