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. [笔记]--Python字符串处理

    一.截取字符串中的内容 1.截取: MsiExec.exe /I{AC76BA86-7AD7-2052-7B44-AB0000000001} 中的: {AC76BA86-7AD7-2052-7B44- ...

  2. Windows PowerShell ISE

    Windows PowerShell 集成脚本环境 (ISE) 是 Windows PowerShell 的主机应用程序.在 Windows PowerShell ISE 中,可以在单一 Window ...

  3. golang:interface{}类型测试

    在golang中空的interface即interface{}可以看作任意类型, 即C中的void *. 对interface{}进行类型测试有2种语法: 1. Comma-ok断言: value, ...

  4. linux命令行下使用R语言绘图

    系统:centos 6.4 64bit 环境安装参考:http://hi.baidu.com/solohac/item/4a18e78f1bef9b5825ebd99c 在R语言中可以使用png()等 ...

  5. FPGA仿真设置步骤

    1.FPGA仿真流程图 2.FPGA时序图 3.FPGA开发方式

  6. html a 链接

    1.链接元素 文本.图像.热区 2.标记 描述性文字 target窗口形式 _self:在自身窗口打开(默认) _blank:在新窗口打开 _parent:在父窗口打开 _top:在顶窗口打开 框架或 ...

  7. [SSH服务]——一些安全性配置和补充实验

    SSH 安全性和配置 转载于 http://www.ibm.com/developerworks/cn/aix/library/au-sshsecurity/ 对于一些之前列举的代码示例,许多系统管理 ...

  8. 微软职位内部推荐-Senior SDE

    微软近期Open的职位: Position: Senior SDE-- Mobile Products Android/iOS/WP Senior Developer Contact Person: ...

  9. [转载]poi导出excel,可以自定义保存路径

    poi导出excel比js导出excel安全性更好,在使用poi导出excel时,先要导入poi-3.5-FINAL-20090928.jar包到你项目的lib目录下,我这里选择是3.5版的 1.ac ...

  10. 软件工程——四则运算3(C#)

    一.设计思想 设计两个窗体,在第一个窗体中选择功能参数,在第二个窗体中显示所出题目. 二.源代码 Form1.cs: using System; using System.Collections.Ge ...