canvas是html5中引入的一个新元素，俗称画布，既然是画布，当然是用来画图的。canvas技术指的是利用javascript操作canvas元素绘制图形的技术，要使用canvas,一定要浏览器支持canvas，谷歌和火狐的支持性很好，IE8不支持。你可以参考这个网站，查看canvas的支持性：http://www.caniuse.com/#search=canvas，当然他还能查询到css3和html5等很多web新潮技术在各浏览器的支持性.

如何使用canvas?

要使用canvas,一般都需要进行以下3步操作：

1，获取canvas对象( 通过选择器选择canvas元素 )

2，通过canvas获取他的上下文绘制环境( context )

3，结合javascript调用canvas的api进行图形绘制

认识canvas的属性：宽度与高度

canvas的默认宽度与高度:宽度:300,高度:150

 <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#cv" );

         console.log( 'canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height );

     }

 </script>

 </head>

 <body>

     <canvas id="cv">你的浏览器不支持</canvas>

 </body>

为什么要知道canvas的宽度与高度呢？ 因为在动画和绘图制作的过程中，经常需要重绘操作，而重绘操作需要获取canvas的宽度与高度.

注意：canvas的宽度与高度，只能通过行间属性或者js动态修改，不要通过样式去修改，否则获取到的宽度与高度不准

 <style>

 #cv {

     width:600px;

     height:400px;

 }

 </style>

 <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#cv" );

         console.log( 'canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height );

     }

 </script>

通过样式修改canvas的宽度与高度分别为600px和400px,但是通过js通过获取到的却不是这个值，而是默认值。所以不要通过样式去修改，而应该通过设置行间属性或者js动态修改属性：

 <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#cv" );

         console.log( 'canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height );

     }

 </script>

 </head>

 <body>

     <canvas id="cv" width="600" height="400">你的浏览器不支持</canvas>

 </body>

这样获取到的宽度与高度才是600px和400px.

canvas也可以通过js动态创建

 <script>

     window.onload = function () {

         var oCanvas = document.querySelector("#cv");

         console.log('canvas的默认宽度与高度:' + '宽度:' + oCanvas.width + ',高度:' + oCanvas.height);

     }

 </script>

 </head>

 <body>

 <script>

 ;(function () {

     var oCanvas = document.createElement("canvas");

     oCanvas.setAttribute('id', 'cv');

     oCanvas.width = '600';

     oCanvas.height = '400'

     document.body.appendChild(oCanvas);

 })();

 </script>

 </body>

[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  2. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  3. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  4. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  5. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  6. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  7. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

  8. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  9. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  10. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

随机推荐

  1. 【渗透课程】前言-揭开Web渗透与安全的面纱（必看）

    服务器是怎么被入侵的 攻击者想要对一台计算机渗透必须具备以下条件: 1.服务器与客户端能够正常通讯 (服务器是为客户端提供服务的) 2.服务器向客户端提供的权限(服务)或者说是端口. 服务端所提供的服 ...

  2. 从yum提示空间不足到根分区扩容

    记录一次安装软件的报错 --1261065212@qq.com         1.系统版本(VMware 虚拟机) [root@ansible-admin ~]# cat /etc/redhat-r ...

  3. Java入门（6）——集合、基本数据类型和引用数据类型的相互转换

    集合: 1.HashMap ---->  类 概述: 通过key可以找到value, key就是键, values就是值. 俗称键值对. 特点: 无序的    值可以重复  键不可以重复的  如 ...

  4. ZOJ 3811 Untrusted Patrol The 2014 ACM-ICPC Asia Mudanjiang Regional First Round

    Description Edward is a rich man. He owns a large factory for health drink production. As a matter o ...

  5. php 数据访问练习：租房查询页面

    <html> <head> <title></title> <meta charset="UTF-8"/> <li ...

  6. Lucene的配置及创建索引全文检索

    Lucene 是一个开放源代码的全文检索引擎工具包,但它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎,部分文本分析引擎(英文与德文两种西方语言).Lucene ...

  7. mysql转ElasticSearch的案例分析

    前言 最近工作中在进行一些技术优化,为了减少对数据库的压力,对于只读操作,在程序与db之间加了一层-ElasticSearch.具体实现是db与es通过bin-log进行同步,保证数据一致性,代码调用 ...

  8. 深度学习框架-caffe安装-环境[Mac OSX 10.12]

    深度学习框架-caffe安装 [Mac OSX 10.12] [参考资源] 1.英文原文:(使用GPU) [http://hoondy.com/2015/04/03/how-to-install-ca ...

  9. 银河麒麟操作系统U盘手动挂载，出现乱码

    使用银河麒麟操作系统,U盘手动挂载,U盘中中文字符显示为乱码??      对于银河麒麟操作系统的这一问题,可能是因为字符集的原因,需要在mount后加参数: sudo mount –o iochar ...

  10. JS基础-----JS中的分支结构及循环结构

    [分支结构] 一.if-else结构 1.结构的写法:if(判断条件){ //条件为true时,执行if的{} }else{ //条件为false时,执行else的{} } 2.注意事项 ①else语 ...