要在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. Zabbix实战-简易教程--排错(持续收集中)

    一.安装错误 1.zabbix 安装故障之无法跳到下一步或点击下一步没反应 执行命令:chownnginx:nginx /var/lib/php/session/ -R   2.proxy上无法采集交 ...

  2. faster-rcnn系列笔记(一)

    目录: 1. 序言 2.正文 2.1  关于ROI 2.2  关于RPN 2.3 关于anchor 3. 关于数据集合制作 4. 关于参数设置 5. 参考 1.序言 叽歪一下目标检测这个模型吧,这篇笔 ...

  3. border-image详解

    一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人.可惜目前支持的浏览器有限,仅Firefox3.5,chrom ...

  4. 将数据按照gzip当时解压的工具类

    import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.File; impo ...

  5. UEP-弹窗给选中数据赋值

    弹窗给选中数据赋值:t/** * 设置分派员 */ function onDispatchMan(){ var rec=ajaxgrid.getCheckedRecords(); if(rec.len ...

  6. Django App(二) Connect Mysql & defualt App admin

    这一篇接着上一篇polls App自动创建admin app.     1.安装数据库 这里的内容从官网看越看越像 EntityFramework的内容.Python支持SQLite,MySql,Or ...

  7. HDU 1232 畅通工程（模板——并查集）

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1232 Problem Description 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出 ...

  8. 编写自己的JavaScript方法库

    下面列出了我在项目中经常使用到的一些方法,这些方法可以很方便的提高我们的工作效率,代码在GitHub上面,点击目录就可以跳转了,欢迎大家通过fork,改编和优化成自己的JavaScript方法库. 目 ...

  9. UE4 分层材质 Layerd Materials

    在UE4中最正规的材质制作流程就像: 建立新材质,并将其调整为达至完美. 在内容浏览器中,建立新材质函数,并将所有材质函数节点复制/粘贴到其中. 将网络连接到新的 Make Material Attr ...

  10. 番外篇--Moddule Zero介绍

    1.1 ABPZero - 概述 介绍 微软ASP.NET身份框架 权限 会话 角色管理 默认角色 用户管理 多租户 设置管理 审计日志 1.1.1 介绍 Modulde Zero实现了ASP.NET ...