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. poj2051 Argus

    Description A data stream is a real-time, continuous, ordered sequence of items. Some examples inclu ...

  2. java异常—检查异常（checked exception）和未检查异常（unchecked exception）

    网易面试要我画异常的结构图,什么是检查异常,什么是非检查异常,我当时的表情是这样的,.我看过,忘了.没办法,继续看,写博客掌握. 先来看看异常的结构图,建议你结合JDK一起看. 可以看出异常的家族势力 ...

  3. [2017-08-25]100行CSharp代码利用dynamic写个DSL(特定领域语言)

    最近看<CLR via C#(第4版)> 读到第五章末尾dynamic基元类型时,看了下作者的一个利用dynamic动态调用string类型的Contains方法(静态方法)的实现,突然发 ...

  4. 常用Linux操作指令

    -------------------------------Linux目录------------------------------- /:根目录,一般根目录下只存放目录,在Linux下有且只有一 ...

  5. [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

    上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意 ...

  6. 谈谈.NET，Java，php

    开通博客后,一直都是转点别的朋友写的有意思的博文,今天我来写我在博客园的第一篇文章,说的不对的地方请你指正.希望本文能为一些准备学习编程的朋友有一点帮助. 开发桌面程序一直都是c语言,c++的天下,因 ...

  7. 【C++小白成长撸】--N阶幻方（魔阵）矩阵

    解决方法:1.第一个元素放在第一行中间一列 2.下一个元素存放在当前元素的上一行.下一列. 3.如果上一行.下一列已经有内容,则下一个元素的存放位置为当前列的下一行. 在找上一行.下一行或者下一列的时 ...

  8. 01-TypeScript概述

    本篇文章向大家介绍新的TypeScript客户端脚本语言,主要涉及两个方面,一是传统JavaScript语言的弱点,二是TypeScript语言的优势. 一.JavaScript的弱点 1.弱类型,缺 ...

  9. none，hidden和opacity="0"设置元素不可见的区别

    none,hidden和opacity="0"均可设置元素为不可见的状态.其中none属于display的属性值,hidden属于visibility的属性值.使用none时元素不 ...

  10. oop作业二—circle

    oop作业-circle 题目描述 编写一个程序,要求根据给定的圆的半径求圆的面积,并将求得的结果打印出来. 要求: 输入输出采用cin和cout. 建立一个工程,将程序写成两个.cpp和一个.h的形 ...