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. kettle报错 ../deploy does not exist, please create it.

    具体错误如下: Xlib: extension "RANDR" missing on display "localhost:10.0". ::, INFO [K ...

  2. hdu 2647 Reward

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=2647 Reward Description Dandelion's uncle is a boss o ...

  3. Oracle用户,权限,角色以及登录管理 scoot 授权

    Oracle用户,权限,角色以及登录管理 1. sys和system用户的区别 system用户只能用normal身份登陆em.除非你对它授予了sysdba的系统权限或者syspoer系统权限. sy ...

  4. shell 与用户交互

    bash shell如何获取命令行参数(添加到命令后的数据).命令行选项(确定命令行为的英文字母).键盘输入数据? 操作命令行参数 1 读取参数 bash shell用位置参数变量(positiona ...

  5. [转]40多个关于人脸检测/识别的API、库和软件

    [转]40多个关于人脸检测/识别的API.库和软件 http://news.cnblogs.com/n/185616/ 英文原文:List of 40+ Face Detection / Recogn ...

  6. Ubuntu 12.04 Desktop使用XAMPP

    Ubuntu 12.04 Desktop安装XAMPP Ubuntu 12.04 Desktop配置XAMPP Ubuntu 12.04 Desktop使用XAMPP 1/打开GUI界面的管理工具 终 ...

  7. UIWebView swift

    // // ViewController.swift // UILabelTest // // Created by mac on 15/6/23. // Copyright (c) 2015年 fa ...

  8. 轻松解决在一个虚拟主机上运行多个 ASP.NET 网站应用

    不知道有没有朋友像我一样会遇到这样一个问题: 在网上购买 .NET 空间,由于虚拟主机的限制,你并不能把某个目录设为一个独立的应用,或者一些价格比较高的空间,虽然可以设置,但数量也是有限的.这个问题导 ...

  9. 四则运算出题器(c++)

    一.设计思路 这次版本加入了一下功能: 可定制题目的数量:修改循环次数: 可以定制每行打印的题目数和行间距的大小(当前题目序号可以整除定制数时输出输入的行间距个换行符): 可以定制算式的范围(修改随机 ...

  10. VS2013 help viewer搜索结果显示源码以及桌面独立运行help viewer

    安装好VS2013后,启动help viewer2.1在搜索栏中搜搜时结果会出现HTML源码. 要解决这个问题先来看看MINE,即Multipurpose Internet Mail Extensio ...