要在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. 【分享】2017 开源中国新增开源项目排行榜 TOP 100

    2017 年开源中国社区新增开源项目排行榜 TOP 100 新鲜出炉! 这份榜单根据 2017 年开源中国社区新收录的开源项目的关注度和活跃度整理而来,这份最受关注的 100 款开源项目榜单在一定程度 ...

  2. Codefoces 723A The New Year: Meeting Friends

    A. The New Year: Meeting Friends time limit per test:1 second memory limit per test:256 megabytes in ...

  3. Java A+B(个人模版)

    JavaA+B: import java.io.*; import java.util.*; import java.math.BigInteger; import java.util.Scanner ...

  4. hdu_1034(模拟题)

    很久没有打模拟题了,再次总结一下模拟题的做法: 仔细分析题意,弄清楚过程 理清楚模拟步骤,严格按照步骤编写代码 添加中间输出测试每步结果 虽然这是一个很简单的水题,但是没有松哥帮忙还是卡了很久,因为没 ...

  5. Python系列之入门篇——HDFS

    Python系列之入门篇--HDFS 简介 HDFS (Hadoop Distributed File System) Hadoop分布式文件系统,具有高容错性,适合部署在廉价的机器上.Python ...

  6. win7 64位安装redis 及Redis Desktop Manager使用(转载的)

    写基于dapper的一套自动化程序,看到 mgravell的另一个项目,StackExchange.Redis,之前在.NET上用过一段时间Redis,不过一直是其它的驱动开发包,这个根据作者介绍,是 ...

  7. CMD命令操作MySql数据库详解

    第一:mysql服务的启动和停止 1.  net stop mysql 2.  net start mysql 第二:登录 mysql –u用户名 [–h主机名或者IP地址] –p密码 例如:mysq ...

  8. TCP协议中三次握手

    TCP/IP是互联网相关的各类协议族的总称 TCP/IP协议族分为:应用层,传输层,网络层,数据链路层 应用层:向用户提供应用服务时的通讯的活动 传输层:提供处于网络连接中的两台计算机之间的数据传输 ...

  9. 如何节省 1TB 图片带宽？解密极致图像压缩

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:Gophery 本文由 腾讯技术工程官方号 发布在云+社区 图像已经发展成人类沟通的视觉语言.无论传统互联网还是移动互联网,图像一直占据着 ...

  10. dedecms_插件

    ../dede/adbaoming.php../dede/baoming_edit.php../dede/templets/baoming_main.htm