canvas 元素使用 JavaScript 在网页上绘制图像,本身是没有绘图能力。

canvas 是一个矩形区域,可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面来做几个示例:

1、填充画布

<canvas id="myCanvas" width="200" height="100" style="border:1px solid red;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#ccc";
cxt.fillRect(5,10,150,60); //x,y,x,y
</script>

执行如下:

2、获取坐标
<script type="text/javascript">
 function cnvs_getCoordinates(e){
   x=e.clientX;
   y=e.clientY;
   document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; }
 function cnvs_clearCoordinates(){
   document.getElementById("xycoordinates").innerHTML="";}
</script>

<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<div id="xycoordinates"></div>

执行如下:

3、绘制线条、图形

1绘制正方形如下:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
 您的浏览器不支持 canvas 标签.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10); //x,y 起点
cxt.lineTo(10,50); //x,y
cxt.lineTo(50,50); //x,y
cxt.lineTo(50,10); //x,y
cxt.lineTo(10,10); //x,y
cxt.stroke();
</script>

执行如下

2绘制圆形如下:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
你的浏览器不支持canvas
</canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#ccc";
cxt.beginPath();
cxt.arc(20,20,10,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

执行如下:

4、绘制渐变

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 canvas 标签.
</canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#000000"); //黑
grd.addColorStop(1,"#FFFFFF"); //白
cxt.fillStyle=grd;
cxt.fillRect(5,10,175,50);//x,y,x,y
</script>

执行如下:

5、图片

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">
您的浏览器不支持 canvas 标签.
</canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="aa.png"
cxt.drawImage(img,10,20); //x,y
</script>

执行如下:

HTML 5 画布(canvas)的更多相关文章

  1. HTML5画布Canvas

    一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...

  2. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  3. PHP《将画布(canvas)图像保存成本地图片的方法》

    用PHP将网页上的Canvas图像保存到服务器上的方法 2014年6月27日 歪脖骇客 发表回复 8 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审 ...

  4. Tkinter画布-Canvas

    Python - Tkinter画布-Canvas: Canvas是一个长方形的面积,图画或其他复杂的布局.可以放置在画布上的图形,文字,部件,或是帧 Canvas是一个长方形的面积,图画或其他复杂的 ...

  5. 转载:将画布(canvas)图像保存成本地图片的方法

    之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式,方法十分简单.但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢? 其实,这个方法也是非常简单 ...

  6. 面向画布(Canvas)的JavaScript库

    面向画布(Canvas)的JavaScript库 总结 每个库各有特色,根据需求选择   学习要点 面向画布(Canvas)的JavaScript库 EaselJS 是一个封装了 HTML5 画布(C ...

  7. 学习前端第二天心得体会(初步了解HTML5的部分API以及画布Canvas)

    一.HTML5部分API 1.选择器querySelector和querySelectorAll 1.1.querySelector:返回文档中匹配指定的CSS选择器的第一元素.  document. ...

  8. java 图形化小工具Abstract Window Toolit :画笔Graphics,画布Canvas(),弹球小游戏

    画笔Graphics Java中提供了Graphics类,他是一个抽象的画笔,可以在Canvas组件(画布)上绘制丰富多彩的几何图和位图. Graphics常用的画图方法如下: drawLine(): ...

  9. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

随机推荐

  1. 解决VirtualBox只能安装32位系统的问题

    发现自己的笔记本(Thinkpad E440)里的 VirtualBox 只能安装 32位 的系统,如下图所示: 经过一番查资料,发现这玩意需要到BIOS里设置一下,方可安装 64位 系统,操作如下: ...

  2. C和指针 第三章 习题

    在一个源文件中,有两个函数x和y,定义一个链接属性external储存类型static的变量a,且y可以访问,x不可以访问,该如何定义呢? #include <stdio.h> void ...

  3. iOS开发——UI进阶篇(十九)UISearchBar控件简介

    最近用到搜索功能.总结一下 搜索,无疑可以使用UISearchBar控件! 那就先了解一下UISearchBar控件吧! UISearchBar控件就是要为你完成搜索功能的一个专用控件.它集成了很多你 ...

  4. PYTHON 深拷贝,浅拷贝

    声明:本篇笔记,模仿与其它博客中的内容 浅拷贝 浅拷贝,在内存中只额外创建第一层数据 import copy n1 = {"k1": "wu", "k ...

  5. PYTHON 函数的动态参数

    #普通参数示例 def func(args): print(args) func(123456) #执行结果为123456 如果给多个参数,就会报错 #动态参数示例 def func(*args): ...

  6. HTML头部

    1.文档声明 html5的声明类型为  <!DOCTYPE html> 2.head部分 2.1 <title></title> 2.2 <base href ...

  7. java13

    1:登录注册案例(理解) 2:Set集合(理解) (1)Set集合的特点 无序,唯一 (2)HashSet集合(掌握) A:底层数据结构是哈希表(是一个元素为链表的数组) B:哈希表底层依赖两个方法: ...

  8. Python之反射,正则

    本节主要内容: 一. 反射: getattr hasattr setattr defattr 二. 补充模块中特殊的变量 三. 正则表达式 re模块 (一)反射: hasattr(object, na ...

  9. Assertion failure in -[UITableView _configureCellForDisplay:forIndexPath:]

    今天遇到了Assertion failure in -[UITableView _configureCellForDisplay:forIndexPath:]这个错误,一直也没有百度,不料想却弄了一个 ...

  10. VS2012 自动为类文件添加头注释

    1. 打开文件夹 %VS110COMNTOOLS%..\IDE\ItemTemplates\CSharp\Code\1033\Class 2. 打开 Class.cs 文件,在其中添加 public ...