canvas是html5新增的一个专用于图形处理的标签，利用canvas可以实现大部分图形操作
canvas的一些基本操作与其他图形编程工具类似，包含：各种形状的边框、路径绘制和填充，画布属性调整，样式调整等：
一、canvas环境构建
进入html编辑环境即可。
在body中添加canvas标签
[html] 
<body> 
<canvas id="canvas1" width="400px" height="200px"></canvas><br /> 
</body> 
这样就完成了一个canvas的铺设,但这样是远远不够的，在运用canvas之前还必须做一些工作，包括变量关联和上下文的创建
[html]
$(document).ready( 
function(){ 
    var canvas=$("#canvas1"); //变量关联 
    var context=canvas.get(0).getContext("2d"); //创建上下文 
    context.clearRect(0,0,400,200); //画矩形 
<span style="white-space:pre">  </span>} 
); 
二、画图的方法有多种，几种典型方法如下
[html]
context.fillRect(20,20,100,100);  //填充 
context.strokeRect(130,20,100,100);  //边框 
[html] 
<span style="white-space:pre">  </span>context.beginPath(); 
    context.strokeRect(30,100,50,50);//勾画路径 
    context.closePath(); 
    context.stroke();//路径的使用方式 
[html] 
<span style="white-space:pre">  </span>context.beginPath(); 
    context.arc(155,125,20,0,Math.PI*1.5,false);//画圆（扇） 
    //context.arc(x,y,radius,开始角度，结束角度,方向是否逆时针) 
    context.closePath(); 
    context.fillStyle="#ffff00";//调整样式 
    context.fill(); 
[html]
<span style="white-space:pre">  </span>var text="hello world!"; 
    context.font="35px italic serif";//设置字体属性 
    context.fillText(text,60,100); 
[html] 
<span style="white-space:pre">  </span>canvas.attr("width",400);//修改画布大小 
    canvas.attr("height",20); 
[html] 
context.clearRect(0,0,canvas.width(),canvas.height());//修改画布大小 
三、实例，下面提供一个完整的各种canvas基础应用的demo源码
[html] 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
<title>canvas简明教程（一）</title> 
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> 
<script language="javascript"> 
$(document).ready( 
function(){ 
    init(); 
} 
); 
function clear1(){ 
    var canvas=$("#canvas1"); //变量关联 
    var context=canvas.get(0).getContext("2d"); 
    context.clearRect(0,0,400,200); 
} 
function clear2(){ 
    var canvas=$("#canvas2"); //变量关联 
    var context=canvas.get(0).getContext("2d"); 
    context.clearRect(0,0,400,200); 
} 
function clear3(){ 
    var canvas=$("#canvas3"); //变量关联 
    var context=canvas.get(0).getContext("2d"); 
    context.clearRect(0,0,400,200); 
} 
function clear4(){ 
    var canvas=$("#canvas4"); //变量关联 
    var context=canvas.get(0).getContext("2d"); 
    context.clearRect(0,0,canvas.width(),canvas.height()); 
} 
function clear5(){ 
    var canvas=$("#canvas5"); //变量关联 
    var context=canvas.get(0).getContext("2d"); 
    canvas.attr("width",$(window).get(0).innerWidth); 
    canvas.attr("height",$(window).get(0).innerHeight); 
    context.fillRect(0,0,canvas.width(),canvas.height()); 
} 
function init(){ 
    var canvas=$("#canvas1"); //变量关联 
    var context=canvas.get(0).getContext("2d"); //创建上下文，学过MFC图形处理的应该很熟悉，即在内存中创建一个相匹配的环境  
    context.fillRect(20,20,100,100); 
    context.strokeRect(130,20,100,100); 
     
    canvas=$("#canvas2"); 
    var context=canvas.get(0).getContext("2d"); //这一句是必须的，否则绘制结果还停留在前面的元素 
    context.beginPath(); 
    context.moveTo(30,30); 
    context.lineTo(300,60); 
    context.closePath(); 
    context.stroke(); 
    context.beginPath(); 
    context.strokeRect(30,100,50,50); 
    context.closePath(); 
    context.stroke(); //这个stroke是笔的意思，只绘制 
    context.beginPath(); 
    context.arc(155,125,20,0,Math.PI*1.5,false); 
    //context.arc(x,y,radius,开始角度，结束角度,方向是否逆时针) 
    context.closePath(); 
    context.fill();//这个fill是全填充 
     
    canvas=$("#canvas3"); 
    var context=canvas.get(0).getContext("2d"); //这一句是必须的，否则绘制结果还停留在前面的元素 
    context.lineWidth=5; 
    context.strokeStyle="#ff0000"; //一经改变永久生效 
    context.beginPath(); 
    context.strokeRect(30,100,50,50); 
    context.closePath(); 
    context.stroke(); //这个stroke是笔的意思，只绘制 
    context.beginPath(); 
    context.arc(155,125,20,0,Math.PI*1.5,false); 
    //context.arc(x,y,radius,开始角度，结束角度,方向是否逆时针) 
    context.closePath(); 
    context.fillStyle="#ffff00"; 
    context.fill();//这个fill是全填充 
     
    canvas=$("#canvas4"); 
    var context=canvas.get(0).getContext("2d"); //这一句是必须的，否则绘制结果还停留在前面的元素 
    var text="hello world!"; 
    context.font="35px italic serif"; 
    context.fillText(text,60,100); 
     
    canvas=$("#canvas5"); 
    var context=canvas.get(0).getContext("2d"); //这一句是必须的，否则绘制结果还停留在前面的元素 
    canvas.attr("width",400); 
    canvas.attr("height",20); 
} 
</script> 
<style> 
body { margin:0 auto;} 
canvas {border:red 1px dashed;} 
</style> 
</head> 
<body> 
<input type="button" onClick="init()" value="点击全部重绘" /> 
<h6>canvas 1 矩形绘制：</h6> 
<canvas id="canvas1" width="400px" height="200px"></canvas><br /> 
<input type="button" onClick="clear1()" value="点击擦掉" /> 
<h6>canvas 2 路径绘制：</h6> 
<canvas id="canvas2" width="400px" height="200px"></canvas><br /> 
<input type="button" onClick="clear2()" value="点击擦掉" /> 
<h6>canvas 3 颜色和线宽调整：</h6> 
<canvas id="canvas3" width="400px" height="200px"></canvas><br /> 
<input type="button" onClick="clear3()" value="点击擦掉" /> 
<h6>canvas 4 文本绘制：</h6> 
<canvas id="canvas4" width="400px" height="200px"></canvas><br /> 
<input type="button" onClick="clear4()" value="点击擦掉" /> 
<h6>canvas 5 测试改动一个canva属性值并抹黑</h6> 
<canvas id="canvas5" width="400px" height="20px"></canvas><br /> 
<input type="button" onClick="clear5()" value="点击变大并抹黑" /> 
<br /><br /> 
<input type="button" onClick="init()" value="点击全部重绘" />

</body> 
</html>

初探canvas的更多相关文章

  1. canvas初探3：画方画圆

    绘制矩形的方法,strokeRect().fillRect()及clearRect(). 方法 描述 strokeRect(double x,double y,double w,double h) 使 ...

  2. canvas初探2

    2.2 canvas的绘图环境 canvas仅仅只是一个绘图的容器,其内存在一个绘图环境,该环境对象提供了全部的绘图功能. 目前canvas的绘图环境是2d,但canvas规范在着手准备支持其他类型的 ...

  3. canvas初探1

    刚申请的博客,当然这也是第一篇.对于canvas也是刚开始着手进行学习,有哪些不对的地方,还望看到本篇博文的朋友指正. 1.canvas的历史 首先,它是HTML5的一个标签. 它是为了客户端矢量图形 ...

  4. Canvas标签初探

    学了一点基础知识,感觉好神奇,全部练习代码 <html> <head> <meta http-equiv=Content-Type content="text/ ...

  5. 初探Javascript之Canvas

    什么是Canvas <canvas>是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形. canvas是一个矩形区域,您可以控制其每一像素. 引入Canvas ```ht ...

  6. HTML5 Canvas 初探

    仅仅只是一个简单的hello world. js代码很简单: <!DOCTYPE HTML> <html lang="cn"> <head> & ...

  7. ReactNative学习实践--动画初探之加载动画

    学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...

  8. Android中滑屏初探 ---- scrollTo 以及 scrollBy方法使用说明

    今天给大家介绍下Android中滑屏功能的一个基本实现过程以及原理初探,最后给大家重点讲解View视图中scrollTo 与 scrollBy这两个函数的区别 . 首先 ,我们必须明白在Android ...

  9. Android中Canvas绘图基础详解（附源码下载） (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

随机推荐

  1. jQuery innerWidth outerWidth(false/true)

    outerWidth默认为false

  2. 实验一 DOS

    实验一.DOS实验 一.           实验目的 DOS(Disk Operating System)是一个使用得十分广泛的磁盘操作系统,就连眼下流行的Windows9x/ME系统都是以它为基础 ...

  3. File system needs to be upgraded. You have version null and I want version 7

    安装hbase时候报错: File system needs to be upgraded. You have version null and I want version 7 注: 我安装的hba ...

  4. html小知识点汇总（浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class，针对特定的标签进行修改）

    1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...

  5. C#中使用Linq实现全外连接

    每次使用都到处查阅,现在记录下来,备查. var fulljoin = (from s in sampleRegistersjoin t in tensionDatas on new { Beach ...

  6. activeMQ 安装于使用

    简易教程: http://blog.csdn.net/jiuqiyuliang/article/category/5617711

  7. MySql 创建表 插入数据！

    create table stu( id int, sname VARCHAR(20), sex VARCHAR(1), birthday DATETIME) insert into stu valu ...

  8. zoj 1788 Quad Trees

    zoj 1788 先输入初始化MAP ,然后要根据MAP 建立一个四分树,自下而上建立,先建立完整的一棵树,然后根据四个相邻的格 值相同则进行合并,(这又是递归的伟大),逐次向上递归 四分树建立完后, ...

  9. html/css小练习2

    效果图:

  10. 前端面试题2016--CSS

    介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种,IE 盒子模型.W3C 盒子模型:(2)盒模型:内容(content).填充(padding).边界(margin). ...