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. TechSmith Camtasia Studio屏幕录像编辑工具

    TechSmith Camtasia Studio屏幕录像编辑工具... --------------------------------------------------------- ----- ...

  2. web中转发、重定向等问题的路径

    web中常用路径,转发,重定向,form表单action的路径 路径的写法: a.绝对路径写法:ServeltContext都必须用绝对路径."/" b.相对路径:其他情况都可以使 ...

  3. thinkjs 文件上传

    采用thinkjs框架写前后端 let formdata = new FormData($('form')[0]); $('#fileUpload').submit(function (e) { e. ...

  4. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)

    整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...

  5. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

  6. java枚举类型构造方法为什么是private的

    枚举类型是单例模式的.你需要实例化一次,然后再整个程序之中就可以调用他的方法和成员变量了.枚举类型使用单例模式是因为他的值是固定的,不需要发生改变.更多知识见 http://blog.yemou.ne ...

  7. 如何将ASP.NET-WebApi发布到IIS6.0上（转）

    关于"如何将ASP.NET-WebApi发布到IIS6.0上"的这方面的学习,一开始项目组长让我们接触的时候,我的心情是这样的 哇呜.jpg 当时真的是一脸懵逼啊,对于刚接触asp ...

  8. PHP初入--表单元素

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. 201521123052《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 学习了更多markdown的知识 参考资料: 百度脑图 XMind 2. 书面作 ...

  10. 201521123062《Java程序设计》第2周学习总结

    1.本周学习总结 声明一个变量后必须对变量进行显式的初始化: 各种数据类型,运算符,表达式的使用: 枚举是初步了解及使用: 字符串String类 2.书面作业 Q1.使用Eclipse关联jdk源代码 ...