要在HTML5中绘制图形，首先要放置一个canvas元素

<canvas id="canvas" width="400" height="300"/>

canvas的代码实际上是放在JavaScript脚本中的，因此，要先获得该元素的id

var canvas =document.getElementById("canvas");

if (canvas==null) return false;

var context=canvas.getContext("2d");

context.fillStyle="#eeeeff";

context.fillRect(0,0,400,300);

context.fillStyle="red";

context.strokeStyle="blue";

context.lineWidth=1;

context.fillRect(50,50,1001,100);

context.strokeRect(50,50,100,100);

全部代码

<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8"/>

   <title>example for html5</title>

</head>

<body>

<div class="showmore">

   <a title="这是一个提示" id="tipping">tips</a>

   <canvas id="canvas" width="400" height="300"/>

</div>

<script type="text/javascript">

var canvas =document.getElementById("canvas");

if (canvas==null) alert("null");

var context=canvas.getContext('2d');

context.fillStyle="#eeeeff";

context.fillRect(0,0,400,300);

context.fillStyle="red";

context.strokeStyle="blue";

context.lineWidth=1;

context.fillRect(50,50,100,100);

context.strokeRect(50,50,100,100);

</script>

</body>

</html>

最近也在学习jQuery，那么在jQuery中如何绘制canvas呢？要注意的是，jQuery对象不能直接使用canvas中的方法，因此首先要把jQuery对象转化成dom对象，才能进行绘图，当然，代码其实没有简便多少

<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8"/>

   <title>example for html5</title>

   <script src="jquery.js" type="text/javascript"></script>

</head>

<body>

<div class="showmore">

   <a title="这是一个提示" id="tipping">tips</a>

   <canvas id="canvas" width="400" height="300"/>

</div>

<script type="text/javascript">

$(document).ready(function(){

var canvas=$("#canvas")[0];

if (canvas==null) alert("null");

var context=canvas.getContext('2d');

context.fillStyle="#eeeeff";

context.fillRect(0,0,400,300);

context.fillStyle="red";

context.strokeStyle="blue";

context.lineWidth=1;

context.fillRect(50,50,100,100);

context.strokeRect(50,50,100,100);

});

</script>

</body>

</html>

绘制圆形

for(var i=0;i<8;i++){

context.beginPath();

context.arc(25*i,25*i,i*10,0,Math.PI*2,true);

context.closePath();

context.fillStyle='rgba(255,0,0,0.25)';

context.fill();

}

绘制直线

context.beginPath();                      //路径开始点，设置这个点主要是为了防止后续染色影响前面部分

context.strokeStyle="black";              //设置直线的粗细和颜色

context.lineWidth=10;

context.moveTo(20,20);                    //设置直线起点，终点

context.lineTo(30,100);

context.stroke();                         //绘制

载入图片

var image=new Image();

image.src="1.png";

image.onload=function(){

context.drawImage(image,20,20，20，20);    //分别是图形对象，绘制起点x,y,图像大小w,h。

};

HTML5图形绘制的更多相关文章

  1. HTML5图形绘制学习（1）-- Canvas 元素简介

    Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素.和其名称Canvas一样,它就相当于一个画布,我们可以在其上描绘各种图形. 这里所说的绘制图型,不是指我们可以进行可视化的图形绘制, ...

  2. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  3. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  4. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  5. HTML5 给图形绘制阴影(绘制五角星示例)

    几个属性 shadowOffsetX:阴影的横向位移量. shadowOffsetY:阴影的纵向位移量. shadowColor:阴影的颜色. shadowBlur:阴影的模糊范围. 属性说明 sha ...

  6. HTML5图形图像处理技术研究

    摘要:图形图像处理平台大部分是传统的C/S架构的桌面应用程序,维护困难,共享性差,而B/S架构的Web程序具有易维护.易共享的优点.本文研究了基于HTML5的Web图形图像处理技术,用HTML5实现了 ...

  7. 13个JavaScript图表（JS图表）图形绘制插件【转】

    现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...

  8. 推荐12个最好的 JavaScript 图形绘制库

    众多周知,图形和图表要比文本更具表现力和说服力.图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web  ...

  9. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

随机推荐

  1. centos perl: symbol lookup error: /usr/local/lib64/perl5/auto/DBD/mysql/mysql.so: undefined symbol: mysql_init

    之前在安装天兔数据库监控工具lepus的时候,运行时一直报perl: symbol lookup error: /usr/local/lib64/perl5/auto/DBD/mysql/mysql. ...

  2. selenium之 驱动环境配置chrome、firefox、IE

    讲起动态网页获取我们一定会用到selenium,至于selenium在各种语言的开发代码很多,但是在我们兴致勃勃找了很多代码,要运行的时候,编译器只会给我们抛出异常,因为我们没有配置好环境.下面我将为 ...

  3. Windows下使用pip安装mysql-python

    安装的过程很煎熬,留个爪,希望对其他人有帮助. 先声明我安装前的电脑配置: Win10: Python2和Python3共存(备注一个好用的方法,感谢知乎大神:https://www.zhihu.co ...

  4. 数据结构-堆（应用篇）之堆排序法-C和C++的实现

    堆排序 关于堆的内容我们已经在上一节中了解了,本节中将给出一个堆的应用-堆排序. 关于堆的概念可以看上一节,入口:http://www.cnblogs.com/HongYi-Liang/p/78536 ...

  5. squashfs文件系统

    一.Squashfs文件系统简介 squashfs是以linux 内核源码补丁的形式发布,附带mksquashfs工具,用于创建squash文件系统.squashfs可以将整个文件系统或者某个单一的目 ...

  6. 共60课：Python基础教程

    简介: 你会看到一堆下载链接.我们就选"Python 2.7.5 Windows Installer",如果是64位系统的同学选下面那个"Python 2.7.5 Win ...

  7. HDU Today（最短路）

    http://acm.hdu.edu.cn/showproblem.php?pid=2112 HDU Today Time Limit: 15000/5000 MS (Java/Others)     ...

  8. 简单的面向对象（OO）练习

    学生设备管理系统: 每个学校都有很多班级,每个班级都有很多设备.(设备可以更新)每个设备都有购买价格,每种设备都有折旧率(如每年折旧10%) 按班级进行统计,指定的班级有多少的设数量? 按班级进行统计 ...

  9. powerdesign

  10. JS中获取session中传过来的值对象

    摘录自:http://www.360doc.com/content/11/0316/13/5790498_101627263.shtml 把某一对象置于session范围内,并在JSP页面中提取ses ...