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. WPF笔记

    1.使用TypeConvert类将XAML标签的Attribute与对象的Propety进行映射 由于XAML所有属性=属性值,其中属性值必须是字符串,当属性值不是字符串时需要添加将该属性值转换成字符 ...

  2. javascript画直线和画圆的方法(非HTML5的方法)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. iOS开发UI篇—Date Picker和UITool Bar控件简单介绍

    iOS开发UI篇—Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何 ...

  4. Spring 整合 Hibernate

    Spring 整合 Hibernate •Spring 支持大多数流行的 ORM 框架, 包括 Hibernate JDO, TopLink, Ibatis 和 JPA. •Spring 对这些 OR ...

  5. Apache +Tomcat的负载均衡与集群配置

    实验拓扑图: 一.搭配环境 (1).Tomcat的安装和配置 Tomcat_a的ip:192.168.55.229 Tomcat_b的ip:192.168.55.231 Tomcat的需要安装jdk和 ...

  6. springmvc跳转的几种方式

    1:spring mvc 是围绕着DispatcherServlet展开的 ,其底层还是servlet 跳转方式: ①request.getRequestDispatcher("../ind ...

  7. 关于PCA的几何表示——MATLAB实现

    关于PCA的一道练习题.这个折腾了好久...终于做出来像样的图,开始的时候忘记对原始数据标准化,怎么也不对.经过标准化之后,做的图看着还可以,有错误请指出! MATLAB代码PCA.m: clear ...

  8. HDU 4251 --- 主席树(划分树是正解)

    题意:查询区间中位数 思路:模板题,相当于区间第K大的数,主席树可以水过,但划分树是正解.但还没搞明白划分树,先上模板 #include <iostream> #include <c ...

  9. PHP Html5上传大文件

    html前台代码: <form id="upload_form" name="upload_form" action="javascript:i ...

  10. 在网页中插入MSN,Skype,QQ的方法

    MSN源码: <a href="msnim:chat?contact=come400@hotmail.com" target="blank">可以适 ...