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. 针对苹果最新审核要求为应用兼容IPv6-备用
			
    在WWDC2015上苹果宣布iOS9将支持纯IPv6的网络服务.2016年初开始所有提交到App Store的应用必须支持IPv6.为确保现有的应用是兼容的,我们需要注意下面几点. 不建议使用底层的网 ...
    
			
    2. 
						
  2. 温习PYTHON语法
			
    看WEBPY的源码结构有点晕,原来很多语法结构都忘了,继承之些. 再看A BYTE OF PYTHON.慢慢补.. number = 23 guess = int(raw_input('Enter a ...
    
			
    3. 
						
  3. Qt中 QString 和int， char等的“相互”转换，关键是QString.toLocal8Bit().data();
			
    Qt中 int ,float ,double转换为QString 有两种方法 1.使用 QString::number(); 如: long a = 63; QString s = QString:: ...
    
			
    4. 
						
  4. Qt源码分析之信号和槽机制
			
    Qt的信号和槽机制是Qt的一大特点,实际上这是和MFC中的消息映射机制相似的东西,要完成的事情也差不多,就是发送一个消息然后让其它窗口响应,当然,这里的消息是广义的说法,简单点说就是如何在一个类的一个 ...
    
			
    5. 
						
  5. vmware-vdiskmanager
			
    vmware workstation可以用自带的程序vmware-vdiskmanager分成多个2G大小的文件. vmware-vdiskmanager -r Mavericks.vmdk -t 1 ...
    
			
    6. 
						
  6. Effective C++笔记（一）——条款26-29
			
    条款26:尽可能延后变量定义式的出现时间 为何要尽量延后? 当程序中途跳出而导致变量未被使用,但是必须进行构造和析构. 最佳初始化变量 直接在构造时指定初值比构造之后再赋值效率高(条款4) ... s ...
    
			
    7. 
						
  7. 黑马程序员_JavaIO流（四）
			
    File概述 File类 用来将文件或者文件夹封装成对象. 方便对文件与文件夹的属性信息进行操作. File对象可以作为参数传递给流的构造函数. 了解File类中的常用方法. 字段:static St ...
    
			
    8. 
						
  8. RHEL修改主机名和IP
			
    1,     修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=NEWHOSTNAME       #修改该值作为主机名,如:NEWPC  ...
    
			
    9. 
						
  9. @SuppressWarnings(unchecked)作用解释
			
    解释一: 屏蔽某些编译时的警告信息 在强制类型转换的时候编译器会给出警告 加上 程序代码 @SuppressWarnings("unchecked") 就不会警告了 解释二: 注释 ...
    
			
    10. 
						
  10. 经常使用的自己定义UI组件- 一：TimeView
			
     近期做蛋疼的机顶盒项目,以后遇到哪些经常使用的组件,记录于此. 反编译 youku视频TV偷来的..也希望各位童鞋多学习别人的代码,为己所用. 当然还有其它的办法,比方监听系统发出的广播等等.等 ...
    
			
    11.