Canvas学习系列一:初识canvas

版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!! https://blog.csdn.net/qq_32135281/article/details/73087660

最近你开始在学习canvas,打算把学习canvas的整个学习过程当中的一些笔记与总结记录下来,如有什么不足之处还请大神们多多指出。

1. canvas介绍

Canvas元素的出现,可以说开启的Web世界绘制动画,图形的大门,其功能非常强大 canvas 元素是HTML5中功能最强大的元素,它的能力主要是通过Canvas中的Context(绘图上下文/绘图环境)对象表现出来的。该对象从canvas本身获取。

var canvas = getElementById('canvas');
var context = canvas.getContext('2d');

2. canvas的后备内容

Canvas元素之间包含的文本,这种文本称为 "后备内容",只有在浏览器不支持canvas元素时才会显示该文本内容

<canvas>当前浏览器不支持canvas元素,请更换浏览器</canvas>

3. Canvas的尺寸

canvas元素时默认宽为300px、高为150px。

我们可以通过canvas的width,height属性去修改canvas的大小,我们也可通过CSS去修改canvas元素的大小。但是二者的修改是有区别的。

canvas实际上有两套尺寸:

一个是canvas元素的大小,一个是canvas绘图表面的大小。

当我们用canvas的属性width,height时实际上我们同时修改了元素的大小与绘图表面的大小

当我们用CSS来设定时,是会修改canvas元素的大小,不会影响绘图表面的大小,这时浏览器就会对绘图表面缩放,会出现我们不想得到的效果

width与height属性修改canvas尺寸大小时的表现

<canvas id="canvas" width="600" height="300">当前浏览器不支持canvas,请更换浏览器</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
cxt.font = "38px Arial";
cxt.fillStyle = "#427ACC";
cxt.strokeStyle = "#00116A";
cxt.fillText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);
</script>

用CSS去修改canvas元素尺寸大小时的表现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas尺寸问题</title>
    <style>
        #canvas {
            margin: 0 auto;
            padding: 0;
            width: 600px;
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<img src="" alt="" id="dataImage">
<canvas id="canvas">当前浏览器不支持canvas,请更换浏览器</canvas>
<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var cxt  = canvas.getContext('2d');
    cxt.font = "38px Arial";
    cxt.fillStyle = "#427ACC";
    cxt.strokeStyle = "#00116A";
    cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
    cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
</script>
</body>
</html>

所以我们在设置Canvas元素的大小时,最好不要使用CSS去设置,我们可以这么去设置

<canvas id="canvas" width="600" height="300">当前浏览器不支持canvas,请更换浏览器</canvas>

 或者

<script type="text/javascript">
var canvas = document.getElementById('canvas');
canvas.width = '600'; //canvas的属性取值为非负整数,所以不能带有px
canvas.height = '300';
</script>

4. canvas API

canvas元素并未提供很多API,它只提供了两个属性三个方法,而绘图功能的方法与属性全都是canvas的绘图环境(context)对象提供。

  1. width:设置/获取canvas元素绘图表面的宽度,默认值为300。
  2. height:设置/获取canvas元素绘图表面的高度,默认值为150。
  3. getContext(): 返回canvas元素的绘图环境对象。
  4. toDataURL(): 描述:返回一个data URI:会根据type指定的参数形式将canvas中的图片编码成一个UTF-16字符串的形式。
  5. toBold(): 描述:创建Blob对象,用以展示canvas上的图片;这个图片文件可以被缓存或保存到本地,由User Agent( 用户代理端 )自行决定。

toDataURL():

type 可选参数

  图片格式,默认为 image/png

  encoderOptions 可选参数

  当图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。

  如果超出取值范围,将会使用默认值 0.92,默认分辨率为96dpi。

这里值得注意:

  • 如果canvas的高度或者宽度为0时,会返回字符串 "data:,"
  • 如果传入的类型不是 "image/png", 但是返回的值以 "data: image/png"开头,说明传入的类型不支持
  • Chrome支持“image/webp”类型

尽管在默认情况下canvas对象是一副位图,但是并不是HTML中的img元素,所以我们可以利用toDataURL方法创建一幅表示canvas的图像;也可以利用此方法创建和操作缓冲canvas。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas尺寸问题</title>
    <style>
        #canvas {
            margin: 0 auto;
            padding: 0;
            display: none;
        }
    </style>
</head>
<body>
<img src="" alt="" id="dataImage">
<canvas id="canvas">当前浏览器不支持canvas,请更换浏览器</canvas>
<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var dataImage = document.getElementById('dataImage');
    canvas.width = '600'; //canvas的属性取值为非负整数,所以不能带有px
    canvas.height = '300';
    var cxt  = canvas.getContext('2d');
    cxt.font = "38px Arial";
    cxt.fillStyle = "#427ACC";
    cxt.strokeStyle = "#00116A";
    cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
    cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
    var dataUrl = canvas.toDataURL();
    dataImage.src = dataUrl;
</script>
</body>
</html>

toBold():

目前该方法只有Firefox与IE10浏览器支持


参考文章:

MDN Web 技术文档

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏守候书阁

[边学边练]用简单实例学习React

学习之路不可停止,最近在玩 React。也动手尝试写了一个实例。借此整理总结下初步学习 React 的一些基础知识。因为这几天比较忙,没那么多时间,所以实例和文...

16060
来自专栏企鹅号快讯

react.js 学习笔记

单向数据流驱动,父节点传递到子节点 react最重要是组件 ReactJS官方地址:https://facebook.github.io/react/ GitH...

229100
来自专栏ThoughtWorks

Web开发的基本功

#ThoughtWorkers好声音#第十五期 (图片:网络) 有些东西称为基本功,对于 Web 开发而言,事件处理模型便是其中的一个,我们经常会在代码里遇到...

344130
来自专栏hightopo

原 荐 WebGL 3D 电信机架实战之数据

24060
来自专栏小李刀刀的专栏

容易被误解的overflow:hidden

为了页面的健壮性,我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上...

410110
来自专栏数据小魔方

数据地图系列9|excel(VBA)数据地图!

今天要跟大家分享的是数据地图系列的第九篇——excel(VBA)数据地图! 关于VBA在excel中的应用非常广泛,本篇仅仅是给出示例代码,不会对基础操作做太过...

57860
来自专栏较真的前端

关于事件的前端面试题总结

31450
来自专栏carven

利用canvas实现毛笔字帖(一)

最近在慕课网上找到了很好的canvas教程, 来自 @liuyubobobo 的 学写一个字 canvas绘图教程 在 @liuyubobobo 老师的系列ca...

21920
来自专栏Python小屋

Python使用tkinter打造自定义对话框完整代码

问题来源:前一阵发过一个技术文章Python编写抽奖式随机提问程序,其中有个弹出式对话框,好像上海科技大学宋老师在群里当时问了一句对话框中中奖姓名是否能显示的大...

57640
来自专栏hightopo

基于 HTML5 Canvas 的工控机柜 U 位动态管理

30340

扫码关注云+社区

领取腾讯云代金券