Canvas之概述,画布与画笔

Canvas之概述,画布与画笔

概述

Canvas 解决了之前使用 flash 带来的兼容性,性能和开发成本的问题。 Canvas 是一个标签,并不能绘制图形,它需要使用 Canvas API 才能进行绘制。

Canvas 绘制的是位图。位图可以很好地控制每一个像素,但在缩放时会失真,并且也不好在页面进行交互。而矢量图可以很好地交互,因为它是一个个dom对象。体积更小,渲染没有位图好,但不会失真。 Canvas 和引入的图片类似,可以直接右键保存。

画布画笔的创建

js 复制代码
<canvas id="canvas">
    您的浏览器版本过低,不支持canvas,请升级浏览器或更换浏览器
</canvas>
<script>
    //获取标签创建画布
    const canvas1 = document.querySelector('#canvas');
    //获取画笔
    const context1 = canvas.getContext('2d');

    //使用js创建画布
    const canvas2 = document.createElement('canvas');
    document.body.append(canvas2);
    //判断是否浏览器支持canvas
    if(!canvas2.getContext){
        console.log('您的浏览器版本过低,不支持canvas,请升级浏览器或更换浏览器');
    }else{
        const context2 = canvas2.getContext('2d');
    }
</script>

有两种方式可以创建画布。一种是使用 canvas 标签,然后获取到画布,另一种是直接创建 canvas 元素,然后放到 body 里。并且还可以创建画笔。

创建画笔时可以进行判断,如果浏览器不支持 canvas ,则画笔就不会被找到。当然也可以直接在标签内写入不支持的文本或图片。使用第二种创建画布的方式更被推荐。因为这样可以被编辑器识别,可以有更好的提示。不过在实际效果上两者相同。

画布区域特点

js 复制代码
<style>
        canvas {
            border: 1px solid #ccc;
            display: block;
            margin-left: 100px;
        }

        #c1 {
            width: 200px;
            height: 200px;
        }
        #c2 {
            width: 400px;
            height: 400px;
        }
        #c3 {
            width: 800px;
            height: 800px;
        }
    </style>
</head>

<body>
    <canvas id="c1" width="400" height="400"></canvas>
    <canvas id="c2" width="400" height="400"></canvas>
    <canvas id="c3" width="400" height="400"></canvas>
    <script>
        {
        const canvas = document.querySelector('#c1');
        const context = canvas.getContext('2d');
        context.fillRect(100, 100, 100, 100);
        }
        {
        const canvas = document.querySelector('#c2');
        const context = canvas.getContext('2d');
        context.fillRect(100, 100, 100, 100);
        }
        {
        const canvas = document.querySelector('#c3');
        const context = canvas.getContext('2d');
        context.fillRect(100, 100, 100, 100);
        }
    </script>
</body>

我们可以在画布上填充一个矩形,都以画布左上角的 (0,0) 原点为起始点,分别为 x,y,w,h 四项。画布内有一个坐标系。这个坐标系的坐标是无限的,但我们只能通过 width 和 height 得到一个固定的尺寸。默认的宽高为 300*150 ,并且 canvas 是一个行内元素,也就是说它是并列排放,一行一行排放。

还有一个放置区域。画好的图像在画布区域,我们要把它放到放置区域。并且我们需要调整它的大小通过 style 样式。可以放大或者缩小,如果放大会导致失真。默认让画布区域和放置区域相同。

相关推荐
4Forsee16 分钟前
【Android】View 事件分发机制与源码解析
android·java·前端
VT.馒头26 分钟前
【力扣】2725. 间隔取消
javascript·leetcode·1024程序员节
一 乐1 小时前
车辆管理|校园车辆信息|基于SprinBoot+vue的校园车辆管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·车辆管理
百锦再1 小时前
Python、Java与Go:AI大模型时代的语言抉择
java·前端·vue.js·人工智能·python·go·1024程序员节
IT_陈寒1 小时前
Vite 3.0终极提速指南:5个鲜为人知的配置技巧让构建效率翻倍
前端·人工智能·后端
菩提树下的凡夫1 小时前
前端vue的开发流程
前端·javascript·vue.js
青山的青衫1 小时前
【用homebrew配置nginx+配置前端项目与后端联调】Macbook M1(附一些homebrew操作)
运维·前端·nginx
二十雨辰1 小时前
[作品集]-容易宝
java·开发语言·前端
Zz燕2 小时前
G6实战_手把手实现简单流程图
javascript·vue.js
恋猫de小郭2 小时前
iOS 26 开始强制 UIScene ,你的 Flutter 插件准备好迁移支持了吗?
android·前端·flutter