最近你开始在学习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 技术文档

Canvas学习系列一：初识canvas的更多相关文章

  1. Canvas学习系列二：Canvas的坐标系统

    上一章内容中我们对canvas元素有了一个初步的认识,在接下来的章节中我们会慢慢学习canvas中图形的绘制:但是在绘制之前我们先来看看canvas中的坐标系统,因为这样我们才能知道绘制的图形放在什么 ...

  2. Node.js实战项目学习系列(1) 初识Node.js

    前言 一直想好好学习node.js都是半途而废的状态,这次沉下心来,想好好的学习下node.js.打算写一个系列的文章大概10几篇文章,会一直以实际案例作为贯穿的学习. 什么是node Node.js ...

  3. AS学习系列[1]——初识Android Studio

    写在前面的话:由于于方老师的高墙所限,网络成了学习Android第一道“拦路虎”.所以,个人以为,在学习Android之前需要了解下FQ技术(仅仅是为了技术学习). 1.AS AS(Android s ...

  4. Vue学习系列(一)——初识Vue.js核心

    前言 vue.js是一套构建用户界面的渐进式框架,vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯,会为每一 ...

  5. Python零基础学习系列之一--初识计算机！

    1-1.计算机概念: Computer: 原指专门负责计算的人,后来演变成特指计算设备,译为"计算机" 计算机的概念: 计算机是能够根据一组指令操作数据的机器. A compute ...

  6. css3学习系列之初识 transform (一)

    一.transform是哈? 从字面意思来看 transform的含义是:改变,使…变形:转换,对 没错 就是变形 变形当有 放大缩小 东倒 西歪,刚好css3中 transform 也出这个 放几个 ...

  7. Canvas学习：封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  8. canvas学习(一)

    Canvas 学习之路 (一) canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面. 因为对前端无限的爱好,更加对canvas充满好奇,将我学习canvas的 ...

  9. 转载爱哥自定义View系列－－Canvas详解

    上面所罗列出来的各种drawXXX方法就是Canvas中定义好的能画什么的方法(drawPaint除外),除了各种基本型比如矩形圆形椭圆直曲线外Canvas也能直接让我们绘制各种图片以及颜色等等,但是 ...

随机推荐

  1. CF Educational Codeforces Round 3 E. Minimum spanning tree for each edge 最小生成树变种

    题目链接:http://codeforces.com/problemset/problem/609/E 大致就是有一棵树,对于每一条边,询问包含这条边,最小的一个生成树的权值. 做法就是先求一次最小生 ...

  2. java上转型和下转型（对象的多态性）

    /*上转型和下转型(对象的多态性) *上转型:是子类对象由父类引用,格式:parent p=new son *也就是说,想要上转型的前提必须是有继承关系的两个类. *在调用方法的时候,上转型对象只能调 ...

  3. centos7安装httpd和php

    centos7许多命令都变了,又要重新记了. centos7默认安装了httpd吧?记不清了,看一下: rpm -qa |grep httpd 没有的话,安装一下吧. yum -y install h ...

  4. DirectFB学习笔记二

    本篇目的,画一个方框,在方框上画一串字符. 实现步骤:首先创建IDirectFB接口,通过它再创建要显示的表面surface,同时创建字体font,绘制字符必须要设置绘制的字体,否则绘制不成功.然后清 ...

  5. CentOS 下PHP的卸载

    一.卸载1.使用命令 rpm -qa|grep 列出需要卸载的软件包rpm -qa|grep php使用rpm -e 加包名rpm -e php-4.3.9-3.15 二.安装1.首先更新系统yum  ...

  6. 深入解析MySQL视图view

    阅读目录---深入解析MySQL视图view 创建视图 查看视图 视图的更改 create or replace view alter DML drop 使用with check option约束 嵌 ...

  7. Yii框架后续

    关于Yii框架遗留的知识点. 1.url路由方式 (1).问号传参(默认) eg: http://localhost/项目/app/index.php http://localhost/项目/app/ ...

  8. [js笔记整理]事件篇

    一.事件流1.冒泡事件:从特定的事件到不特定事件依次触发:(由DOM层次的底层依次向上冒泡)(1)示例: <html onclick="add('html<br>')&qu ...

  9. js事件触发(一)

    今日和一位前端童鞋聊了下js触发事件的两种形式: 第一种在jsp/vm上做类似onClick=functionName()的触发:另一种是在js文件中增加对应节点的监听事件触发.前者页面掺杂了js的内 ...

  10. 最新合购网源码net.asp程序 彩票合买功能采用全新内核、全新架构，更小巧、功能更强、更快、更安全稳定

    合买代购功能 可购彩种:福彩3D.排列3.重庆时时彩.天津时时彩.广东11选5.11运夺金.江苏快3.广西快3.拥有上百种玩法,更多彩种即将开发完成,更多的彩种不断开发更新中... 选号投注:建立追号 ...