canvas 的基本用法

最新推荐文章于 2024-06-08 22:16:13 发布

Chrestin

最新推荐文章于 2024-06-08 22:16:13 发布

阅读量247

点赞数 1

分类专栏：技术博客文章标签： canvas

本文链接：https://blog.csdn.net/qq_33833379/article/details/87687480

版权

技术博客专栏收录该内容

3 篇文章 0 订阅

订阅专栏

canvas 的基本用法

canvas 元素

1.canvas 标签只有 width 和 height 两个属性。尽量用 width 和 height 属性为 canvas 明确规定宽高，而不是使用 CSS，避免图像扭曲。
2.当没有设置宽度和高度的时候，canvas 会初始化宽度为300像素和高度为150像素。
3.id 属性并不是canvas元素所特有的，但建议给每个标签都加上 id 属性便于我们在脚本中找到它。

canvas 的替换内容

由于有些浏览器不支持 canvas ,故可为 canvas 设置替换内容，当浏览器不支持 canvas 时就展示替换的内容。

<canvas id="stockGraph" width="150" height="150">
  您的游览器不支持 canvas
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

渲染上下文

canvas 起初是空白的，为了在画布上展示内容，首先脚本需要找到渲染上下文，然后在它上面绘制。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

检查支持性

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

一个模板骨架

<html>
 <head>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

小结

以上是 canvas 最基本的用法，接下来我们还会了解它的其他绘图方法。

Chrestin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 的基本用法

canvas 的基本用法canvas 元素1.canvas 标签只有 width 和 height 两个属性。尽量用 width 和 height 属性为 canvas 明确规定宽高，而不是使用 CSS，避免图像扭曲。2.当没有设置宽度和高度的时候，canvas 会初始化宽度为300像素和高度为150像素。3.id 属性并不是canvas元素所特有的，但建议给每个标签都加上 id 属性便于...
复制链接

扫一扫