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. C 封装一个简单二叉树基库

    引文 今天分享一个喜欢佩服的伟人,应该算人类文明极大突破者.收藏过一张纸币类型如下 那我们继续科普一段关于他的简介 '高斯有些孤傲,但令人惊奇的是,他春风得意地度过了中产阶级的一生,而  没有遭受到冷 ...

  2. MIFARE系列5《存储结构》

    Mifare S50把1K字节的容量分为16个扇区(Sector0-Sector15),每个扇区包括4个数据块(Block0-Block3),我们也将16个扇区的64个块按绝对地址编号为0~63,每个 ...

  3. RAP开发入门-开发笔记

    一.发布/运行 每次项目发布时需要在MANIFEST.MF->bulid中勾选依赖包.文件.代码等,避免报错 部署时项目可能会报一个baseline的错误,window->preferen ...

  4. linux kernel同步机制的思考

    在学习内核同步机制的时候,书中介绍了同步方法:原子操作(atomic).自旋锁(spinlock).信号量(semaphore).互斥锁(mutex).完成变量(completion).大内核(BLK ...

  5. javascript 关于Date 时间类型 处理方法

    上一篇博客中和大家分享了关于 字符串转时间类型 这一篇顺便整理下 javascript 中 Date 类型的一些方法 var time = new Date(); var year=time.getY ...

  6. 使用dom4j技术对xml文件的基本操作

    1.pojo类:Notice package com.green.notice.storage; import java.util.ArrayList; import java.util.List; ...

  7. 基于opencv 的图片模糊判断代码

    #include"cv.h"  #include"highgui.h"  #include<iostream>  using namespace s ...

  8. iOS-打包成ipa

    第一步:模拟器选择栏,选择"Generic iOS Device ".早期版本需要断开手机连接,才可以找到. 第二步:选择"Product"菜单下的" ...

  9. Object C学习笔记2-NSLog 格式化输出数据

    1 . 几种常用类型变量声明 int i =10; BOOL isShow=YES; BOOL isShow=1; float f = 3.1415926; char a =120; NSString ...

  10. 使用 PHP cURL 提交 JSON 数据

    http://www.oschina.net/code/snippet_54100_7351 http://www.lornajane.net/posts/2011/posting-json-data ...