<!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. 【转载】LCT题单

    本篇博客的题单转载自FlashHu大佬的博客:LCT总结--应用篇(附题单)(LCT). 关于\(LCT\)可以查看这篇博客:\(LCT\)入门. 这里面有些题解的链接是空链接,尚未补全. 维护链信息 ...

  2. 【洛谷1120】小木棍（一道有技巧的dfs）

    点此看题面 大致题意: 给你\(N\)根小木棍,请你把它们拼成若干根长度相同的木棍,问你最小可能长度. 枚举+\(dfs\) 显然的,木棍的长度肯定是\(\sum_{i=1}^n len[i]\)的一 ...

  3. 关于java的自增问题

    程序执行结果是0,,,因为count永远是0

  4. Java自带工具包StringUtils包含方法

    //导入包 import org.apache.commons.lang3.StringUtils //判断不为空 不包含空格 StringUtils.isNotEmpty(" " ...

  5. CUDA入门需要知道的东西

    CUDA刚学习不久,做毕业要用,也没时间研究太多的东西,我的博客里有一些我自己看过的东西,不敢保证都特别有用,但是至少对刚入门的朋友或多或少希望对大家有一点帮助吧,若果你是大牛请指针不对的地方,如果你 ...

  6. C#自减运算符

    一.C#自减运算符(--) 自减运算符(--)是将操作数减1. 1. 前缀自减运算符 前缀自减运算符是“先减1,后使用”.它的运算结果是操作数减1之后的值. 例如: --x;  // 前缀自减运算符 ...

  7. C# 运用StreamReader类和StreamWriter类实现文件的读写操作

    对文件的读写操作应该是最重要的文件操作,System.IO命名空间为我们提供了诸多文件读写操作类,在这里我要向大家介绍最常用也是最基本的StreamReader类和StreamWriter类.从这两个 ...

  8. 第26题：LeetCode572:Subtree of Another Tree另一个树的子树

    题目描述 给定两个非空二叉树 s 和 t,检验 s 中是否包含和 t 具有相同结构和节点值的子树.s 的一个子树包括 s 的一个节点和这个节点的所有子孙.s 也可以看做它自身的一棵子树. 示例 1: ...

  9. MySQL - 在sql语句执行时是先执行触发器再检查约束条件的

    在sql语句执行时是先执行触发器再检查约束条件的

  10. 关于union的一些问题

    创建一个测试数据表 CREATE TABLE `temp_table` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT ...