<!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.18 MyEclipse导入jquery-1.8.0.min.js等文件报错的解决方案

    MyEclipse导入jQuery-1.8.0.min.js等文件的时候有时候会报了一堆missing semicolon的错误.怎么解决这个报错呢?方法如下: 1.选中报错的jquery文件例如&q ...

  2. kubernetes-存储卷（十二）

    为了保证数据的持久性,必须保证数据在外部存储在docker容器中,为了实现数据的持久性存储,在宿主机和容器内做映射,可以保证在容器的生命周期结束,数据依旧可以实现持久性存储.但是在k8s中,由于pod ...

  3. 梁勇 java教材 编程练习题 第二章 2.6 键盘 读取一个在0 到 9999 之间的整数，并将该整数的各位数字相加。

    import java.util.Scanner; /** * 需求:从键盘输入任意0~9999之间的整数,输出这个整数各位数字之和. * 思路:方法一,使用扫描器Scanner类,扫描控制台输入流 ...

  4. springboot中加入druid对sql进行监控

    springboot作为现在十分流行的框架,简化Spring应用的初始搭建以及开发过程,现在我们就使用springboot来进行简单的web项目搭建并对项目sql进行监控. 项目的搭建就省略了,spr ...

  5. Linux运维常用命令详解

    1.ls 文件属性:  -:普通文件  d:目录文件  b:块设备  c:字符设备文件  l:符号连接文件  p:命令管道  s:套接字文件  文件权限: 9位数字,每3位一组  文件硬链接次数  文 ...

  6. tcl之string操作-match/map/大小写转换

  7. php中处理字符串的常见函数

    编写程序的时候,经常要处理字符串,最基本就是字符串的查找,在php检测字符串中是否包含指定字符串可以使用正则,如果你对正则不了解,那么有几个函数可以为您提供方便. 1. strstr strstr() ...

  8. pyautogui 模块学习

    在日常实施中,我们用控件对大部分的网页和客户端都能进行拾取操作.但是仍有一小部分的应用无法进行操作.这里我常用到 pyautogui 这个模块.下面做个分享. Python 的 pyautogui 模 ...

  9. Docker背后的内核知识（一）

    Docker背后的内核知识 当谈论Docker时,常常会聊到Docker的实现方式.很多开发者都知道,Docker容器本质上是宿主机上的进程.Docker通过namespace实现了资源隔离.通过cg ...

  10. django 连接MYSQL时，数据迁移时报：django.db.utils.InternalError: (1366, "Incorrect string value: '\\xE9\\x97\\xAE\\xE9\\xA2\\x98' for column 'name' at row 5")

    django 连接MYSQL时,数据迁移时报:django.db.utils.InternalError: (1366, "Incorrect string value: '\\xE9\\x ...