Canvas学习系列一：初识canvas
最近你开始在学习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）对象提供。
- width：设置/获取canvas元素绘图表面的宽度，默认值为300。
- height：设置/获取canvas元素绘图表面的高度，默认值为150。
- getContext(): 返回canvas元素的绘图环境对象。
- toDataURL(): 描述：返回一个data URI：会根据type指定的参数形式将canvas中的图片编码成一个UTF-16字符串的形式。
- 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浏览器支持
参考文章：
Canvas学习系列一：初识canvas的更多相关文章
- Canvas学习系列二：Canvas的坐标系统
上一章内容中我们对canvas元素有了一个初步的认识,在接下来的章节中我们会慢慢学习canvas中图形的绘制:但是在绘制之前我们先来看看canvas中的坐标系统,因为这样我们才能知道绘制的图形放在什么 ...
- Node.js实战项目学习系列(1) 初识Node.js
前言 一直想好好学习node.js都是半途而废的状态,这次沉下心来,想好好的学习下node.js.打算写一个系列的文章大概10几篇文章,会一直以实际案例作为贯穿的学习. 什么是node Node.js ...
- AS学习系列[1]——初识Android Studio
写在前面的话:由于于方老师的高墙所限,网络成了学习Android第一道“拦路虎”.所以,个人以为,在学习Android之前需要了解下FQ技术(仅仅是为了技术学习). 1.AS AS(Android s ...
- Vue学习系列(一)——初识Vue.js核心
前言 vue.js是一套构建用户界面的渐进式框架,vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯,会为每一 ...
- Python零基础学习系列之一--初识计算机！
1-1.计算机概念: Computer: 原指专门负责计算的人,后来演变成特指计算设备,译为"计算机" 计算机的概念: 计算机是能够根据一组指令操作数据的机器. A compute ...
- css3学习系列之初识 transform (一)
一.transform是哈? 从字面意思来看 transform的含义是:改变,使…变形:转换,对 没错 就是变形 变形当有 放大缩小 东倒 西歪,刚好css3中 transform 也出这个 放几个 ...
- Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- canvas学习(一)
Canvas 学习之路 (一) canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面. 因为对前端无限的爱好,更加对canvas充满好奇,将我学习canvas的 ...
- 转载爱哥自定义View系列－－Canvas详解
上面所罗列出来的各种drawXXX方法就是Canvas中定义好的能画什么的方法(drawPaint除外),除了各种基本型比如矩形圆形椭圆直曲线外Canvas也能直接让我们绘制各种图片以及颜色等等,但是 ...
随机推荐
- Android -- 贝塞尔实现水波纹动画（划重点！！）
1,昨天看到了一个挺好的ui效果,是使用贝塞尔曲线实现的,就和大家来分享分享,还有,在写博客的时候我经常会把自己在做某种效果时的一些问题给写出来,而不是像很多文章直接就给出了解决方法,这里给大家解释一 ...
- 【外文翻译】 为什么我要写 getters 和setters
原文作者: Shamik Mitra 原文链接:https://dzone.com/articles/why-should-i-write-getters-and-setters 当我开始我的java ...
- waiting for spring......
世间哪得双全法,不负如来不负卿....<仓央嘉措>
- spring、spring mvc、mybatis框架整合基本知识
学习了一个多月的框架知识了,这两天很想将它整合一下.网上看了很多整合案例,基本都是基于Eclipse的,但现在外面公司基本都在用Intellij IDEA了,所以结合所学知识,自己做了个总结,有不足之 ...
- Yeelink初步体验
环境 Qemu: 2.8.0 开发板:vexpress-ca9 概述 前面的博文已经使我们的虚拟开发板具备了访问外网的目的,离物联网越来越近了.要玩物联网,Yeelink不得不说,它提供了 ...
- 进击 spring ！！
1.spring简介 Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用某一个组件,同时为 J2EE 应用程序开发提供集成 ...
- Unity 消息发送机制 解析
该博客,只为解析,解析,解析,已经整理好,已经整理好,已经整理好.代码核心原理套用网上最流行的那一套,也是最常用游戏开发适用的消息机制.这里面加上自己的一些优化,极大的修正(哈哈),实测,没问题.万一 ...
- 学生成绩管理C++版
[标题]学生成绩管理的设计与实现 [开发语言]C++ [主要技术]STL [概要设计]类名:student 类成员:No.Name.Math.Eng.Chn.Cpro.Sum 成员函数:getname ...
- 【设计模式】单一职责原则(SRP)
单一职责原则是面向对象原则五大原则中最简单,也是最重要的一个原则, 他的字面定义如下: 单一职责原则(Single Responsibility Principle, SRP): 一个类只负责一个功能 ...
- 基于TypeScript的FineUIMvc组件式开发（开头篇）
了解FineUIMvc的都知道,FineUIMvc中采用了大量的IFrame框架,对于IFrame的优缺点网上也有很多的讨论,这里我要说它的一个优点“有助于隔离代码逻辑”,这也是FineUIMvc官网 ...