<!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. Spark的调度

    作业调度简介 设计者将资源进行不同粒度的抽象建模,然后将资源统一放入调度器,通过一定的算法进行调度,最终要达到高吞吐或者低访问延时的目的. Spark在各种运行模式中各个角色实现的功能基本一致,只不过 ...

  2. 转载请注明：Windows 系统必备好用软件&工具合集跟推荐 | 老D博客

    Windows 系统必备好用软件&工具合集跟推荐 97 63,371 A+ 所属分类:工具软件 一.浏览器 二.下载软件 三.播放软件 五.电子邮件客户端 六.图片/照片 浏览查看工具 七.文 ...

  3. angular4 学习日志（一 依赖注入）

    1.创建一个服务,为了好管理建一个名叫services的文件夹管理所有服务: ng g service services\person 2.在服务中定义一个person 类 : 3.在app.mdul ...

  4. 使用vue-cli创建项目

    使用Vue UI创建.管理项目 1.全局安装vue-cli 3.0 npm install -g @vue/cli 2.启动vue ui 创建项目: vue ui

  5. java基础编程——二维数组中的查找

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...

  6. XAMPP安装过程中，出现的问题

    这次运行一个简单的前端(html+css+js+ajax)+php后端项目,运行XAMPP的时候,出现两个问题: phpmyadmin运行不起来,一直报1544错误 请求本地图片及php文件报403错 ...

  7. es6中的类及es5类的实现

    目录 类的特点 类的特点 1.类只能通过new得到 在es6中类的使用只能是通过new,如果你将它作为一个函数执行,将会报错. //es6的写法 class Child { constructor() ...

  8. Mysql关闭和修改密码

    数据库的关闭方法: 1.优雅的关闭数据库的方法:mysqladmin -uroot -p123456 shutdown 2.脚本关闭:/etc/init.d/mysqld stop 3.使用kill信 ...

  9. jsp中的文件上传

    首先需要有以下的jar包 jsp代码如下: <!-- ${pageContext.request.contextPath}为: "/" + 当前项目名 --> < ...

  10. PHP计算两个字符的相似程度similar_text

    在网站开发中,我们会常常要计算两个字符的相似程度,那么PHP为我们提供了一个函数similar_text;  1,similar_text的用法 如果我想计算"ly89cn"和&q ...