1.先把canvas选出来,不选出来你往哪儿画!

var oCan=  document.getElementById('xxx');

2.声明基于 canvas 的context对象,没他你怎么调用方法画?!

 var cxt=oCan.getContext('2d');//还不支持3d呢

3.然后就用context对象的XXXStyle方法呗,你画画的时候不得选什么色儿的笔呀!(其实不选笔也行,默认就是黑色,此步骤可以省略)

   var cxt.fillStyle='Red';

4.想画啥玩意儿就用什么方法,自己看表格去:想画啥就点这儿看

5.想好了画啥就动笔吧!是fill还是stroke,就画呗。

cxt.fill()实心滴 或 cxt.stroke()空心滴

画完就完了

HTML5 canvas 绘图步骤的更多相关文章

  1. HTML5 Canvas绘图如何使用

    --------------复制而来--原地址http://jingyan.baidu.com/article/ed15cb1b2e642a1be369813e.html HTML5 Canvas绘图 ...

  2. HTML5 canvas绘图基本使用方法

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingCon ...

  3. HTML5 canvas绘图

    HTML5 canvas画图 示例 ------- <!DOCTYPE html> <head> <meta charset="UTF-8"> ...

  4. HTML5 Canvas绘图详解 drawImage() 方法 有图有真相!

    步骤 1 2 3 4 5   简介 是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做简单的(和不那么简单的)动画. ...

  5. HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

    Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...

  6. HTML5 Canvas绘图系列之一:圆弧等基础图形的实现

    之前的一个微信项目已经要结项了,最近整理一下项目中使用较多的canvas画图方面的知识吧,打算写个3,4篇的样子.本篇主要介绍基础操作和弧线画法. 之后再写一下趋势图,直方图,文本图像处理的. 言归正 ...

  7. [html5] canvas 绘图:八卦图

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. HTML5 Canvas 绘图

    首先要注意: <canvas> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Ex ...

  9. HTML5 canvas绘图基础(电子名片生成器源码)

    创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...

随机推荐

  1. 【javascript】随手记代码

    //js实现的当前界面的刷新.前进.后退 <input type="button" value="刷新" onclick="window.loc ...

  2. WPF中多窗口共享静态属性

    由于我的DoubanFm在重新考虑之后,需要设置一个全局的CurrentSong,这个字段要让所有的VM都知道,而我同时又想把它作为我所有VM的共有属性.而且我想尽量减少代码的复制,提高重用.所以我做 ...

  3. ORA-01078、ORA-01565、ORA-17503、ORA-29701

    OS: Oracle Linux Server release 5.7 DB: Oracle Database 11g Enterprise Edition Release 11.2.0.2.0 - ...

  4. Redo日志

    undo日志有一个潜在的问题,即我们在将书屋改变的所有数据写到磁盘前不能提交该事务.有时,如果让数据库修改暂时只存在于主存中,我们可以节省磁盘IO;只要在崩溃发生时有日志可以恢复,这样做就是安全的. ...

  5. 在meteor中使用支付,以及与服务器进行数据交互

    how to use Meteor.http.call? Meteor.http is only available on sever side http模块仅能用于server端. 1,add ht ...

  6. ubuntu下xampp的安装

    转载:http://blog.csdn.net/zhoushengchao/article/details/6006584 首先,请从www.xampp.org下载最新版XAMPP.然后,将安装文件服 ...

  7. 14.quartus联合modelsim仿真

    在quartus调用modelsim仿真过程中,出现了一个错误,如下所示: Check the NativeLink log file I:/Quartus11.0/Myproject/testi_n ...

  8. ubuntu 修改主机名

    sudo gedit /etc/hostname sudo gedit /etc/hosts

  9. vim替换及多行注释命令

    1.多行注释: . 进入命令行模式,按ctrl + v进入 visual block模式,然后按j, 或者k选中多行,把需要注释的行标记起来 . 按大写字母I,再插入注释符,例如// . 按esc键就 ...

  10. C++中常见的几种异常类型

    1.C++具有完善的异常捕获机制,采用try{}  catch(){}机制,这是C语言无法比拟的 2.常见的几种异常: bad_alloc:       请求分配内存失败, operator new ...