2014-09-30  09:14:57  
<!doctype html>

<html>

<head>

    <title>

    </title>

</head>

<style>

</style>

<body>

    <canvas width=="" height="" id="demo">

        您的浏览器不支持canvas！

    </canvas>

    <script>

        var canvas = document.getElementById('demo');

    //    alert(canvas);

     var ctx = canvas.getContext('2d');

     //alert(ctx)

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.closePath();

    ctx.stroke();

//end

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.closePath();

    ctx.stroke();

//end

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.closePath();

    ctx.stroke();

//end

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.closePath();

    ctx.stroke();

//end

    ctx.beginPath();

    ctx.arc(, , , , Math.PI*, true);

    ctx.lineWidth = 1.0;

    ctx.strokeStyle = "#000";

        ctx.closePath();

    ctx.stroke();

        //左空心眼睛

    ctx.beginPath();

    ctx.arc(, , , , Math.PI*, true);

    ctx.lineWidth = 1.0;

    ctx.strokeStyle = "#000";

        ctx.closePath();

    ctx.stroke();

        //右空心眼睛

    ctx.beginPath();

    ctx.arc(, , , , Math.PI*, true);

    ctx.lineWidth = 1.0;

    ctx.strokeStyle = "#000";

    ctx.closePath();

    ctx.stroke();

    //右实心眼睛

    ctx.beginPath();

    ctx.arc(, , , , Math.PI*, true);

    ctx.lineWidth = 1.0;

    ctx.fillStyle = "#000000";

    ctx.fill();

    ctx.shadowOffsetX = ; // 设置水平位移

    ctx.shadowOffsetY = ; // 设置垂直位移

    ctx.shadowBlur = ; // 设置模糊度

    ctx.shadowColor = "rgba(0,0,0,1)"; // 设置阴影颜色

    ctx.closePath();

    ctx.stroke();

    //左实心眼睛

    ctx.beginPath();

    ctx.arc(, , , , Math.PI*, true);

    ctx.lineWidth = 1.0;

    ctx.strokeStyle = "#000";

    ctx.fill();

    ctx.shadowOffsetX = ; // 设置水平位移

    ctx.shadowOffsetY = ; // 设置垂直位移

    ctx.shadowBlur = ; // 设置模糊度

    ctx.shadowColor = "rgba(0,0,0,1)"; // 设置阴影颜色

    ctx.closePath();

    ctx.stroke();

    //嘴

    ctx.beginPath();

    ctx.arc(    , , , , false);

    ctx.strokeStyle = "#000";

        ctx.closePath();

    ctx.stroke();

    //线 帽子线

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.closePath();

    ctx.stroke();

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.closePath();

    ctx.stroke();

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.closePath();

    ctx.stroke();

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.closePath();

    ctx.stroke();

//弧线   开始
  1. context.arc(x, y, r, startAngle, endAngle, anticlockwise)    //语法

其中：

x 代表圆心横坐标

y 代表圆心纵坐标

r 代表弧半径

startAngle 代表起始弧度

endAngle 代表结束弧度

anticlockwise 代表弧的方向，true为逆时针，false为顺时针



//弧线   end



　　ctx.beginPath(); 
			  　　ctx.arc(300, 300, 130, 310, Math.PI, false);  
			  　　ctx.strokeStyle = '#000';  
			  　　ctx.stroke();  
			  　　ctx.closePath();


 



    </script>

</body>

</html>




Canvas 画文字实例：




<!DOCTYPE html>

<html>

 <head>

    <meta charset="utf-8">

    <title>Canvas</title>

 </head>

 <style type="text/css">

    body{margin:20px auto; padding:; width:800px; }

    canvas{border:dashed 2px #CCC}

 </style>

 <script type="text/javascript">

    function $$(id){

        return document.getElementById(id);

    }

    function pageLoad(){

        var can = $$('can');

        var cans = can.getContext('2d');

        cans.font = 'bold 144px consolas';

        cans.textAlign = 'left';

        cans.textBaseline = 'top';

        cans.strokeStyle = '#DF5326';

        cans.strokeText('Hello', , );

        cans.font = 'bold 144px arial';

        cans.fillStyle = 'red';

        cans.fillText('World', ,);

    }

    function img_click(){

        var can = $$('can');

        var cans = can.getContext('2d');

        cans.clearRect(,,,);

    }

 </script>

<body onload="pageLoad();">

    <canvas id="can" width="800px" height="600px" onclick="img_click(this);"></canvas>

</body>

</html>




Canvas 图像切割




<!DOCTYPE html>

<html>

 <head>

    <meta charset="utf-8">

    <title>Canvas</title>

 </head>

 <style type="text/css">

    body{margin:20px auto; padding:; width:800px; }

    canvas{border:dashed 2px #CCC}

 </style>

 <script type="text/javascript">

    function $$(id){

        return document.getElementById(id);

    }

    function pageLoad(){

        var can = $$('can');

        var cans = can.getContext('2d');

        var objImg = new Image();

        objImg.src = 'lin.jpg';

        objImg.onload = function (){

            cans.drawImage(objImg,,,,);

        }

        cans.beginPath();

        cans.arc(,,,,Math.PI*,);

        cans.closePath();

        cans.clip();

    }

    function img_click(){

        var can = $$('can');

        var cans = can.getContext('2d');

        cans.clearRect(,,,);

    }

 </script>

<body onload="pageLoad();">

    <canvas id="can" width="800px" height="600px" onclick="img_click(this);"></canvas>

</body>

</html>

注：  切出来的图是圆形的。

案例2：



<!DOCTYPE html>

<html>

 <head>

    <meta charset="utf-8">

    <title>Canvas</title>

 </head>

 <style type="text/css">

    body{margin:20px auto; padding:0; width:800px; }

    canvas{border:dashed 2px #CCC}

 </style>

 <script type="text/javascript">

    function $$(id){

        return document.getElementById(id);

    }

    function pageLoad(){

        var can = $$('can');

        var cans = can.getContext('2d');

        var objImg = new Image();

        objImg.src = 'lin.jpg';

        objImg.onload = function (){

            cans.drawImage(objImg,500,400,500,400,100,100,500,400);

        }

    }

 </script>

<body onload="pageLoad();">

    <canvas id="can" width="800px" height="600px" onclick="img_click(this);"></canvas>

</body>

</html>


注：  切出来的图是正方形的。








Canvas Api


http://javascript.ruanyifeng.com/htmlapi/canvas.html


参考博文：http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html


http://www.vaikan.com/html-5-canvas-tutorial-displaying-images/
												


											
Canvas -画图的更多相关文章
	

    
						
  1. html5之canvas画图基础
		
    HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...
    
		
    2. 
						
  2. Canvas画图在360浏览器中跑偏的问题
		
    问题描述,canvas画图的js代码中编写的是画正方形的代码,结果在360浏览器上变成了长方形,不知道怎么回事,请问各位大神是否遇到过此类问题? <!DOCTYPE html> <h ...
    
		
    3. 
						
  3. h5 canvas 画图
		
    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
    
		
    4. 
						
  4. html5 Canvas画图3：1px线条模糊问题
		
    点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...
    
		
    5. 
						
  5. 使用 canvas 画图时图像文字模糊的解决办法
		
    最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率创建不同尺寸的画布.以下是创建高分辨率画布的代码: /** * 创建高分辨率画布 * @param w 画布宽 * ...
    
		
    6. 
						
  6. html5 canvas 画图移动端出现锯齿毛边的解决方法
		
    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...
    
		
    7. 
						
  7. HTML5 canvas画图
		
    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...
    
		
    8. 
						
  8. HTML5 Canvas画图与动画学习59例
		
    HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例
    
		
    9. 
						
  9. html Canvas 画图 能够选择并能移动
		
    canvas 画图,能够选中所画的图片并且能够随意移动图片 <html xmlns="http://www.w3.org/1999/xhtml"> <head r ...
    
		
    10. 
						
  10. 毕业设计总结（1）-canvas画图
		
    去年6月底完成的毕业设计,到现在也才开始给它做个总结,里面有很多可以学习和借鉴的东西. 我的毕业设计的题目是“一种路径规划算法的改进与设计”,具体的要求可参见下面的表格: 题目 一种路径规划算法的改进 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. DotNET知识点总结三（笔记整合）
			
    使用接口的注意事项: 接口中的成员不能加访问修饰符 接口中的成员不能有任何实现 实现接口的子类必须实现接口的全部成员 一个类可以同时继承一个类并实现多个接口,如果一个子类同时继承了父类A,并实现了接口 ...
    
			
    2. 
						
  2. Cracking the coding interview--Q1.6
			
    原文: Given an image represented by an NxN matrix, where each pixel in the image is 4 bytes, write a m ...
    
			
    3. 
						
  3. MCS-51单片机存储器结构
			
    MCS-51的存储器可分为四类:  程序存储器 一个微处理器能够聪明地执行某种任务,除了它们强大的硬件外,还需要它们运行的软件,其实微处理器并不聪明,它们只是完全按照人们预先编写的程序而执行之.那么设 ...
    
			
    4. 
						
  4. 网络编程中几个地址结构与转换（in_addr,sockaddr,sockaddr_in,pcap_addr）
			
    man socket可以查看相关信息. socket头文件: #include <sys/types.h> /* See NOTES */ #include <sys/socket. ...
    
			
    5. 
						
  5. 动态共享库(so)开发精悍教程
			
    动态共享库(so)开发精悍教程 翻译并根据实际情况进行了小小修改,仅关注Linux下动态共享库(Dynamic shared library .so)的开发. 1 简单的so实例 源文件 //test ...
    
			
    6. 
						
  6. BZOJ1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富
			
    1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富 Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 459  Sol ...
    
			
    7. 
						
  7. VC++6.0注释快捷键设置
			
    在Qt Creator,eclipse等编辑器中,都默认有注释代码的快捷键:Ctrl + /. 注释快捷键在程序编程当中的作用相当明显,提高了编程效率.我在网上找到了一个在VC++6.0工具中添加注释 ...
    
			
    8. 
						
  8. red-hat6.5 yum 源配置，cloud-init 安装 This system is not registered to Red Hat Subscription Management. You can use subscription-manager to register
			
    This system is not registered to Red Hat Subscription Management. You can use subscription-manager t ...
    
			
    9. 
						
  9. 爱斯达M2C服装定制系统介绍—在线播放—优酷网，视频高清在线观看
			
    爱斯达M2C服装定制系统介绍-在线播放-优酷网,视频高清在线观看 视频: 爱斯达M2C服装定制系统介绍
    
			
    10. 
						
  10. 加上固件密码，Mac更安全
			
    在Mac OS X中,管理员密码非常重要,在修改系统参数或安装软件时都要求输入密码,这避免了绝大部分的破坏性误操作和恶意程序(尽管Mac上恶意程序本来就少的可怜). 但是对Mac OS X比较熟悉的人 ...
    
			
    11.