<!DOCTYPE html>

<html>

<head lang="en">

    <title></title>

    <meta charset="utf-8">

</head>

<body>

    <h2>绘图入门</h2>

    <canvas id="mc" width="300" height="180" style="border:1px solid black"></canvas>

<script type="text/javascript">

    /*获取绘图DOM对象*/

    var canvas = document.getElementById("mc");

    /*获取绘图 CanvasRenderingContext2D对象*/

    var ctx = canvas.getContext("2d");

    /*设置填充颜色*/

    ctx.fillStyle = "#f00";

    /*绘制矩形*/

    ctx.fillRect(30,40,80,100);

</script>

</body>

</html>

以上案例比较简单，实际上可以绘制很复杂的图像

HTML5 新增绘图功能的更多相关文章

  1. 关于html5新增的功能（百度）

    HTML5包含以下新增和更新功能: 1. 新增了一种HTML文档类型:<DOCTYPE html>   2. 新增了一些结构化标记的元素(<header>,<nav> ...

  2. HTML5新增的一些属性和功能之一

    大致可以分为10个方面: HTML5表单元素和属性 表单2.0 视音频处理 canvas绘图 SVG绘图 地理定位 拖放技术 web work web storage web socket 一.新的i ...

  3. HTML5新增的本地存储功能(笔记)

    HTML5新增的本地存储功能分为两种,分别对应两个JS对象:①本地存储对应localStorage对象,主要用于长期保存整个网站的数据(这些数据可以永久保存在客户端电脑硬盘内).②会话存储对应sess ...

  4. HTML5新增的表单验证功能

    一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...

  5. HTML5新增的一些属性和功能之六——拖拽事件

    拖放事件的前提是分为源对象和目标对象,你鼠标拖着的是源对象,你要放置的位置是目标对象,区分这两个对象是因为HTML5的拖放事件对两者是不同的. 被拖动的源对象可以触发的事件: 1).ondragsta ...

  6. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  7. HTML5新增核心工具——canvas

    原文:HTML5新增核心工具--canvas Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素. Canvas由一个可绘制地区HTML代码中的属性定义决 ...

  8. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  9. HTML5新增及移除的元素

    HTML经过10多年的发展,其元素经历了废弃与不断重新定义的过程.为了更好的处理现在的互联网应用,HTML5新增了图形绘制.多媒体播放.页面结构.应用程序存储.网络工作等新元素.http://hove ...

随机推荐

  1. IOS 监听键盘的通知（NSNotificationCenter）

    通知方法: /** * 当键盘改变了frame(位置和尺寸)的时候调用 */ - (void)keyboardWillChangeFrame:(NSNotification *)note { // 设 ...

  2. codeforces 599D Spongebob and Squares

    很容易得到n × m的方块数是 然后就是个求和的问题了,枚举两者中小的那个n ≤ m. 然后就是转化成a*m + c = x了.a,m≥0,x ≥ c.最坏是n^3 ≤ x,至于中间会不会爆,测下1e ...

  3. ReentrantReadWriteLock的使用

    ReentrantReadWriteLock的规则是: 多线程情况下:读-写互斥.写-读互斥.写-写互斥.读-读共享 验证“读-写互斥.写-读互斥.写-写互斥.读-读共享” //单个线程 读-读 不互 ...

  4. 【转】CentOS 7.0 安装Redis 3.2.1详细过程和使用常见问题

    http://www.linuxidc.com/Linux/2016-09/135071.htm 环境:CentOS 7.0 Redis 3.2.1 Redis的安装与启动 这里我把Redis放在/h ...

  5. Bootstrap 附加导航(Affix)插件

    bootstrap 附加导航(Affix)插件允许某个div元素固定到页面中的某个位置.您可以打开或关闭使用该插件之间进行切换 后续再写

  6. 2018.11.3 Nescafe18 T2 太鼓达人

    题目 背景 七夕祭上,Vani 牵着 cl 的手,在明亮的灯光和欢乐的气氛中愉快地穿行.这时,在前面忽然出现了一台太鼓达人机台,而在机台前坐着的是刚刚被精英队伍成员 XLk.Poet_shy 和 ly ...

  7. 【原创】数据处理中判断空值的方法(np.isnan、is np.nan和pd.isna)比较

      转载请注明出处:https://www.cnblogs.com/oceanicstar/p/10869725.html  1.np.isnan(只有数组数值运算时可使用) 注意:numpy模块的i ...

  8. sql 参数化查询

      在初次接触sql时,笔者使用的是通过字符串拼接的方法来进行sql查询,但这种方法有很多弊端 其中最为明显的便是导致了sql注入. 通过特殊字符的书写,可以使得原本正常的语句在sql数据库里可编译, ...

  9. 一、MySQL 安装

    MySQL 安装 所有平台的 MySQL 下载地址为: MySQL 下载 . 挑选你需要的 MySQL Community Server 版本及对应的平台. 注意:安装过程我们需要通过开启管理员权限来 ...

  10. 4-8 string

    1.常用的string模块 import string # 26个小写字母 print(string.ascii_lowercase) # abcdefghijklmnopqrstuvwxyz # 2 ...