要在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. Swagger入门教程

    [译]5.41 Swagger tutorial 单击此处查看原文 更多概念参见:Implementing Swagger with your API docs 关于 Swagger Swagger能 ...

  2. Python线程：线程的调度-守护线程

    Python线程:线程的调度-守护线程   守护线程与普通线程写法上基本么啥区别,调用线程对象的方法setDaemon(true),则可以将其设置为守护线程.在python中建议使用的是thread. ...

  3. Swagger的简单入门【转载】

    一.Swagger简介 上一篇文章中我们介绍了Spring Boot对Restful的支持,这篇文章我们继续讨论这个话题,不过,我们这里不再讨论Restful API如何实现,而是讨论Restful ...

  4. weui中的日期选择控件关于时间段的设置！

    近日用到了日期控件,但是需要把时和分去掉,功能上是做一个预约的功能,所以只需要在年月日后面提供时间段的选择. BUG在于如果第一次点开弹框而没做任何操作,然后点了其他任意区域则弹框关闭,甚至你的8:0 ...

  5. CTF---Web入门第七题 猫抓老鼠

    猫抓老鼠分值:10 来源: 实验吧 难度:难 参与人数:8697人 Get Flag:3740人 答题人数:3944人 解题通过率:95% catch!catch!catch!嘿嘿,不多说了,再说剧透 ...

  6. AtCoder Grand Contest 017

    noi前橙名计划失败.全程搞C而gg…… A - Biscuits 题意:背包,求价值为奇/偶的方案数. #include<cstdio> #include<queue> #i ...

  7. c语言基础学习01

    =============================================================================每一种语言都有其独特的语法规则与语言定义. 指 ...

  8. c语言_FILE结构体解释及相关操作

    1. 文件和流的关系 C将每个文件简单地作为顺序字节流(如下图).每个文件用文件结束符结束,或者在特定字节数的地方结束,这个特定的字节数可以存储在系统维护的管理数据结构中.当打开文件时,就建立了和文件 ...

  9. Spring框架学习笔记（1）——HelloWorld

    1.创建一个新的项目,并添加Spring框架 2.创建HelloWorld.java package com.broadtext.beans.helloworld; public class Hell ...

  10. 【LeetCode】476. Number Complement （java实现）

    原题链接 https://leetcode.com/problems/number-complement/ 原题 Given a positive integer, output its comple ...