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. JSON对象和String之间的互转及处理

    如题,本文列举了一些在web前端开发中常用的转换及处理方式.使用JSON而不是字符串,主要是为了方便处理. JSON:JavaScript 对象表示法(JavaScript Object Notati ...

  2. golang实现ping命令

    // Copyright 2009 The Go Authors.  All rights reserved.// Use of this source code is governed by a B ...

  3. netlink+netfilter

    http://blog.chinaunix.net/uid-21768364-id-3618377.html

  4. Google工程师打造Remix OS系统 桌面版安卓下载

    三位前Google工程师打造的Remix OS系统终于来到了PC桌面上,现已可以下载尝鲜. Remix OS for PC基于Android-x86项目,由安卓5.1 Lollipop深度定制而来,不 ...

  5. How to Notify Command to evaluate in mvvmlight

    How to Raize Command to evalituate in mvvm In mvvmlight, we bind our control to the relaycommand obj ...

  6. Winform之ListView

    ListView表示 Windows 列表视图控件,该控件显示可用四种不同视图之一显示的项集合.

  7. Quartus13.0破解方法

    一定要按照步骤顺序才能破解,这里很关键 1.下载和打开Quartus II破解器,选择“应用”,选择“是”,找到bin(64位系统是bin64)目录下的sys_cpt.dll,“打开” 2.然后将li ...

  8. js从富文本中找出固定电话、手机号码、邮箱并添加上链接。

    function richtextfindtel(value) { /*固定电话.手机号码.邮箱*/ var tempValue = value.replace(/<[^>]+>/g ...

  9. oracle odbc配置

    oracle odbc配置 Win7 64位 下安装oracle odbc 不能使用控制面板中 “管理工具”->“数据源(OBDC)”中安装数据源. 而要在“ 运行” 中输入  C:\Windo ...

  10. Android -- Webview自适应屏幕

    第一种                                                                                          WebSett ...