var c = canvas.getContext("2d");//get canvas 2d context

canvas including a proposed 3D context;

c.fillStyle("#ffffff");//rawing canvas background color

c.fillRectangle(sx,sy,ex,ey);//drawing a rectanle ,the (sx,sy) is start point,(ex,ey) is end point

c.font = "20px"//the canvas font size is 20 pixel

c.textBaseline = "top"//the text vertical position

c.fillText("Hello",100,100);//drawing a text to canvas,The three parameters of this method are text string,x position,y position

c.strokeStyle = "#ffffff";//set a color for the stroke(the border of the box)

c.strokeRect(0,0,100,100);//upper left x and y coordinates ,and the lower right x and y coordinates

html5 canvas simple drawing的更多相关文章

  1. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  2. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  3. 简介 jCanvas:当 jQuery遇上HTML5 Canvas

    https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...

  4. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  5. Html5 Canvas transform setTransform

    Html5 Canvas transform就是矩阵变换,一种坐标的变形. 坐标变形的三种方式,平移translate, 缩放scale以及旋转rotate都可以通过transform做到. tran ...

  6. 提高HTML5 canvas性能的几种方法

    简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准.许多开发者现在利 ...

  7. 基于HTML5 Canvas的线性区域图表教程

    之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的 ...

  8. 基于HTML5 Canvas的网页画板实现教程

    HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...

  9. 怎样用HTML5 Canvas制作一个简单的游戏

    原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

随机推荐

  1. iOS开发UI篇—推荐两个好用的Xcode插件(提供下载链接)

    iOS开发UI篇—推荐两个好用的Xcode插件(提供下载链接) 这里推荐两款好用的Xcode插件,并提供下载链接. 一.插件和使用如下: 1.两款插件 对项目中图片提供自动提示功能的插件:KSImag ...

  2. pwnable.kr-collision

    题目: 链接后登陆 ssh col@pwnable.kr -p2222 查看文件以及权限 Ls –al 查看代码 cat col.c 根据 if(strlen(argv[1]) != 20){ pri ...

  3. JS日期的获取与加减

    1)获取当前日期: var today = new Date(); 2)设定某个日期: var d = new Date("2015/1/08".replace(/-/g,&quo ...

  4. ubuntu科学计算包blas和lapack的安装

    该包是高性能的线性代数计算库,两个包一般是相互依赖,因此选择同时介绍其安装: 官方发布如今是lacpack-3.5.0.tgz,获取方法是网址.但打不开,ubuntu一般用 wget http://w ...

  5. PHP日志扩展 SeasLog-1.6.8, 性能更优

    SeasLog-1.6.8 发布了,性能更优. 改进日志: 1.6.8: 优化内存使用和性能,修复已知Bug. - Fixed issue #97 PHP5.* Cached Block. - Fix ...

  6. jvm1

    字节码常量池: 01开头的说明是一个utf-8编码的常量,那么后面就一定要跟两个字节也就是四位16进制的数,来表示这个常量占几个字节,然后后面再跟与这个字节数对应长度的utf-8编码的字符串.之所以一 ...

  7. 简单通过java的socket&serversocket以及多线程技术实现多客户端的数据的传输,并将数据写入hbase中

    业务需求说明,由于公司数据中心处于刚开始部署的阶段,这需要涉及其它部分将数据全部汇总到数据中心,这实现的方式是同上传json文件,通过采用socket&serversocket实现传输. 其中 ...

  8. windows核心编程---第三章 内核对象及句柄本质

      本章讨论的是相对抽象的概念,不涉及任何具体的内核对象的细节而是讨论所有内核对象的共有特性. 首先让我们来了解一下什么是内核对象.内核对象通过API来创建,每个内核对象是一个数据结构,它对应一块内存 ...

  9. 学习笔记:HSB、HSL

    转自知乎:http://www.zhihu.com/question/22077462 HSB 为 色相,饱和度,明度, HSL 为 色相,饱和度,亮度, HSV 为色相,饱和度,明度. HSB 和 ...

  10. Java数据结构和算法之数组与简单排序

    一.数组于简单排序 数组 数组(array)是相同类型变量的集合,可以使用共同的名字引用它.数组可被定义为任何类型,可以是一维或多维.数组中的一个特别要素是通过下标来访问它.数组提供了一种将有联系的信 ...