要在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. 80、Flask用法简析

    本篇导航: 基本使用 模板.请求和响应 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于 ...

  2. Python 集合 深浅copy

    一,集合. 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 去重,把一个列表变成集合,就自动去重了. ...

  3. IdentityServer4 中文文档

    一.介绍 特性一览 整体介绍 术语的解释 支持的规范 包和构建说明 二.快速入门 设置和概述 #1 使用客户端证书控制API访问 #2 使用密码认证方式控制API访问 #3 使用OpenId Conn ...

  4. Zabbix实战-简易教程（6）--Server端高可用

    3.4 server前端高可用    至此,单台Zabbix server环境已经搭建完成,为了达到高可用效果,我们需要通过2台服务器之间通过HA软件进行探测,一旦检测到主的server挂掉后,从的s ...

  5. Jquery_基础(一) 常用方法与选择器

    一.Jquery常用方法: $(function(){ //掌握$() 以及function(){} 结合 $("#a01").click(function(){ alert('h ...

  6. HDU 2563 统计问题(递归,思维题)

    统计问题 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  7. [51nod1407]与与与与

    有n个整数,问从他们中取出若干个数字相与之后结果是0的有多少组. 答案比较大,输出对于 1,000,000,007 (1e9+7)取模后的结果. Input 第一行输入一个整数n.(1<=n&l ...

  8. cin与cout详解

    输入和输出并不是C++语言中的正式组成成分｡C和C++本身都没有为输入和输出提供专门的语句结构｡输入输出不是由C++本身定义的,而是在编译系统提供的I/O库中定义的｡C++的输出和输入是用" ...

  9. [学习OpenCV攻略][004][播放AVI视频]

    cvCreateFileCapture(文件路径) 创建一个影音文件录像机,返回值为CvCapture类型,用于读取视频文件 cvQuerFrame(视频) 将下一帧视频文件载入内存,当CvCaptu ...

  10. 数据结构课程设计四则运算表达式求值（C语言版）

    本系统为四则运算表达式求值系统,用于带小括号的一定范围内正负数的四则运算标准(中缀)表达式的求值.注意事项:    1.请保证输入的四则表达式的合法性.输入的中缀表达式中只能含有英文符号"+ ...