<!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. 3203 数组做函数参数----排序函数--C语言版

    3203: 数组做函数参数----排序函数--C语言版 时间限制: 1 Sec  内存限制: 128 MB提交: 253  解决: 151[提交][状态][讨论版][命题人:smallgyy] 题目描 ...

  2. 转：Python字典与集合操作总结

    转自:http://blog.csdn.net/business122/article/details/7537014 一.创建字典 方法①: >>> dict1 = {} > ...

  3. java算法面试题：设计一个快速排序。双路快速排序，简单易于理解。

    package com.swift; import java.util.ArrayList; import java.util.Collections; import java.util.Compar ...

  4. response.setContentType("text/html;charset=utf-8")后依然乱码的解决方法

    从浏览器获取数据到服务器,服务器将得到数据再显示在浏览器上英文字母正常显示,中文字符乱码的问题,已经使用了 response.setContentType("text/html;charse ...

  5. vue项目跨域问题

    跨域 了解同源政策:所谓"同源"指的是"三个相同". 协议相同 域名相同 端口相同 解决跨域 jsonp 缺点:只能get请求 ,需要修改B网站的代码 cors ...

  6. 已解决: idea创建并部署SpringMVC项目时 报错 java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener

    用IDEA创建并运行SpringMVC项目时,最初发现没有Servlet包,这个问题已在上篇解决,然而当我们尝试去运行此时的SpringMVC项目时,发现仍然有错误.ClassNotFoundExce ...

  7. Mysql--select基础查询

    基本语法:select 查询列表 from 表名 查询列表可以是表中字段.常量值.表达式.函数:查询的结果是一个虚拟的表格. 注意: ①sql语言大小写不敏感 ②关键字不能分行或略写 ③一般书写方式为 ...

  8. git bash学习3 -简单杂乱知识点记录

    branch 新建分支 git init git add git commit 先新建一个仓库以及master 然后新建分支 git branch BranchName 然后切换分支 git chec ...

  9. 火狐IE event和target的兼容

    一.event对象 IE 中可以直接使用 window.event 对象,而 FF 中则不可以,解决方法之一如下: var theEvent = window.event || arguments.c ...

  10. nuxt.js express模板项目服务器部署

    nuxt版本:0.10.6 技术栈:nuxt.js, express, pm2 部署环境:windows server 之前用nuxt.js 的express的模板项目在windows下用nginx进 ...