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. 淘宝网触屏版 - 学习笔记（0 - 关于dpr）

    注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. 对于pc端网页设计师来说,移动端的网页制作,我之前只是简单的加了一个 <meta name=&qu ...

  2. Linux环境部署（JDK/Tomcat/MySQL/证书）

    #################### 安装JDK1.7.x ####################下载JDK1.7版本的tar包(http://www.oracle.com/technetwor ...

  3. 最详细的Log4j使用教程

    日志是应用软件中不可缺少的部分,Apache的开源项目log4j是一个功能强大的日志组件,提供方便的日志记录.在apache网站:jakarta.apache.org/log4j 可以免费下载到Log ...

  4. hdu4087ALetter to Programmers(三维旋转矩阵)

    参考 三维旋转矩阵 + 矩阵加速 这个还要用到仿射变换. 平移 translate tx ty tz 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1 缩放 scale kx ky ...

  5. angularJS中的ui-router和ng-grid模块

    关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里https://github. ...

  6. UGUI text image 等加Shadow OutLine等

    Text,文本控件,同NGUI中的Label.支持动态字库.大小调节.富文本(基本的html标签格式)等等.描边.阴影等需要Effect组件支持.Add Component-->UI--> ...

  7. OneSQL助力永辉超市大卖特卖

    数据库集群查询达到10w/s,更新操作5k/s,正常! 应用并发连接达到历史高峰4倍,正常! 业务平稳运行,正常! 永辉微店527大促,圆满成功!这标志着平民软件数据库工程师.accenture咨询实 ...

  8. JS中循环绑定遇到的问题及解决方法

    本文是原创文章,如需转载,请注明文章出处 在工作中,有时会有这样的需求:在一个页面上添加了6个按钮,然后分别为他们绑定点击事件监听器,当点击按钮1时,输出1,当点击按钮2时,输出2. 循环绑定代码如下 ...

  9. (47) odoo详细操作手册

    odoo 8 详细操作手册, ERP(Odoo8.0)操作手册-v1.10(陈伟明).pdf 链接: http://pan.baidu.com/s/1hsp0bVQ 密码: r9tt 花了将近9个月时 ...

  10. JS数组方法汇总 array数组元素的添加和删除

    js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...