canvas动画（一）初步了解canvas

最新推荐文章于 2024-09-09 23:30:35 发布

橘居啾

最新推荐文章于 2024-09-09 23:30:35 发布

阅读量282

点赞数

分类专栏： canvas 文章标签： canvas html5

本文链接：https://blog.csdn.net/qq_41502108/article/details/114304205

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

canvas动画（一）初步了解canvas

虽然与工作内容无关，但是是难得能找到有兴趣想学着玩的了，工作之余慢慢学吧，希望之后能写出好看的页面。

概念

Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。

Canvas 对象表示一个 HTML 画布元素，没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

定义

canvas画布等同于一张位图，拥有自己的width和height属性（实际上只有这两个属性），相当于设置了分辨率。不要使用style来设置canvas的宽度和高度

<canvas id="cnv" width="1600" height="900"></canvas>

getContext(in DOMString contextId)渲染上下文，保证能够显示在画布上

const canvas = document.getElementById('cnv');
   /* 获得 2d 上下文对象 */
const ctx = canvas.getContext('2d');

进行一些绘制和变换等，最终在画面上显示。举例：（九个不同颜色的小方块）

$(document).ready(function(){
    draw();
});


//移动
function draw(){
     var ctx = document.getElementById('canvas').getContext('2d');

     for (var i = 0; i < 3; i++) {
         for (var j = 0; j < 3; j++) {
           ctx.save();
           ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
           ctx.translate(10 + j * 50, 10 + i * 50);
           ctx.fillRect(0, 0, 25, 25);
          ctx.restore();
        }
       }
 }