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. [2012-08-21]FreeBSD9.0体验记

    最近在看<构建高可用Linux服务器> 由于对FreeBSD的稳定性仰慕已久,正好参照该书的指导进行体验一二. 先感谢下该书作者余大大,同时做个声明:本文中若有命令脚本涉及版权问题,请与p ...

  2. Tomcat迁移到WebsphereURL获取中文参数乱码问题

    URL携带中文参数时,tomcat通常用两种方法可以解决中文乱码问题: String param = new String(request.getParameter("param " ...

  3. 归并排序Java实现

    package practice; import edu.princeton.cs.algs4.*; /* * 归并排序 * 时间复杂度O(NlgN) N为数组长度 * 归并排序在小数组上表现并不好可 ...

  4. 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  5. 用JS控制CSS基本样式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...

  6. 第4阶段——制作根文件系统之编译配置安装busybox(3)

    在上一节分析出制作一个最小的根文件系统至少需要: (1)/dev/console(终端控制台, 提供标准输入.标准输出以及标准错误) /dev/null  (为空的话就是/dev/null, 所有写到 ...

  7. Android学习记录：SQLite数据库、res中raw的文件调用

    SQLite数据库是一种轻量级的关系型数据库. 在android中保存数据或调用数据库可以利用SQLite. android中提供了几个类来管理SQLite数据库 SQLiteDatabass类用来对 ...

  8. Vue组件库的那些事儿，你都知道吗？

    前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...

  9. 蓝桥杯试题利用数学知识经典解法，1.三个空瓶子换一瓶水；2.猜最后一个字母——猎八哥FLY

    本博客为本人原创,转载请在醒目位置表明出处. 1.乐羊羊饮料厂正在举办一次促销优惠活动.乐羊羊C型饮料,凭3个瓶盖可以再换一瓶C型饮料,并且可以一直循环下 去,但不允许赊账.请你计算一下,如果小明不浪 ...

  10. ps中如何让图层在画布内水平居中

    下图每个小logo图案距离它们的上参考线的距离均为10px,而我们如何让图层在画布内水平居中??? 如上图中三个图层的图案是用来给Html/Css中的background属性使用的,虽然可以通过鼠标拖 ...