<!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. 2018.6.24 oracle数据库的 事务及视图

    第06章 事务及视图 本章内容  事务  视图 1 事务 1.1 什么是事务 事务也称工作单元,是一个或多个SQL语句组成的序列,这些个SQL操作作为一个完整的工作单元要么全部执行,要么全不执行. ...

  2. Feign + Hystrix 服务熔断和服务降级

    本机IP为  192.168.1.102 1.    新建 Maven 项目   feign 2.   pom.xml <project xmlns="http://maven.apa ...

  3. Mac 系统 + Chrome浏览器 网页前端出现中文文字反转或顺序错乱

    问题背景 React开发的系统,收到一个BUG反馈,*"号个人统计"文字不正确,应为"个人号统计"*. 收到BUG后,打开浏览器查验是什么情况,难道犯了最基本的 ...

  4. 国产中标麒麟Linux部署dotnet core 环境并运行项目 （三） 部署运行WEB API项目

    部署dotnet Core Web API 上一步的文章,是我们公司最核心的一个ORM组件,在中标麒麟系统完成了一个插入数据的任务,这一步是将正式的从dot net framework 迁移到 dot ...

  5. tomcat服务器用Servlet类查找磁盘文件上的Json信息，如果匹配则在浏览器上显示出该条内容的全部信息

    package com.swift; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.IOE ...

  6. Apache 错误日志

    配置文件中:httpd.conf ErrorLog "/usr/local/var/log/apache2/error_log1" CustomLog "/usr/loc ...

  7. neo4j 安装

    查看 http://ip:7474/browser/

  8. linux文件属性之时间戳及文件名属性知识

    7  8  9 三列是时间(默认是修改时间) modify 修改时间  -mtime  修改文件内容 change 改变时间 -ctime  文件属性改变 access 访问时间  -atime  访 ...

  9. [转载]本地配置的 *.dev,*.app域名 在谷歌浏览器中总是自动转跳到https上，导致不能访问？

    本地开发环境 .dev 不正常,找到文章mark一下 转自:https://segmentfault.com/q/1010000012339191

  10. php扩展开发-变量

    我们在php中用到的变量,在底层的C语言代码里是一个结构体,由四个成员组成typedef struct _zval_struct { zvalue_value value; /* 变量的值,也是一个结 ...