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. python 3.5 购物小程序
			
    #!/usr/bin/env python #encoding: utf-8 import time import os nowtime = time.strftime('%Y-%m-%d %H:%M ...
    
			
    2. 
						
  2. HEX和BIN文件的区别
			
    以下的内容是从网上转载来的,原文地址:http://blog.csdn.net/zhangliang_571/article/details/8519469  在这里感谢原作者. 1,是在keil中编 ...
    
			
    3. 
						
  3. UNIX网络进程间通信漫谈（1）
			
    进程间通信 IPC是进程间通信的简称,指的是运行在某个操作系统上的不同进程间各种消息传递方式,在Unix操作系统过去30年的演变史中,消息传递经历了如下几个阶段: 管道,管道是第一个广泛使用的IPC形 ...
    
			
    4. 
						
  4. 转：对于linux下system()函数的深度理解(整理)
			
    这几天调程序(嵌入式linux),发现程序有时就莫名其妙的死掉,每次都定位在程序中不同的system()函数,直接在shell下输入system()函数中调用的命令也都一切正常.就没理这个bug,以为 ...
    
			
    5. 
						
  5. ECharts使用心得——矩阵树图
			
    1. 缘起 最近实验室 boss 让用矩形树图做一下研究数据的展示,囧,矩形树图是什么鬼.问了问师兄,说用 R 语言可以实现,让我去研究一下. = =,那这周不是不用干别的了. 刚好最近在研究百度出的 ...
    
			
    6. 
						
  6. 小脚本一则---CDH的批量部署中，如果是从ESXI的VCENTER的模板生成的虚拟机，如何快速搞定网络网络卡配置？
			
    当然,在作模板的过程中,我们除了要定义好SELINUX,IPTABLES之后, HOSTS文件维护,用ZOOKEEPER还是RSYNC实现? 都要在前期好好规划.. 脚本如下,一般改成自己的就可以用. ...
    
			
    7. 
						
  7. 不建议用wxWidgets，底层有过多的bug
			
    不建议用wxWidgets, 搞了wxWidgets 3年,不是所说的那么容易跨平台,很多bug,不稳定, 莫名其妙的崩溃找源代码修改编译真是费时费力. 开发速度真没有使用本地sdk开发高, 很难定制 ...
    
			
    8. 
						
  8. CRegKey 注册表操作
			
    CRegKey 注册表操作 标签: accessnulluserpathbyteie 2011-11-03 13:55 3477人阅读 评论(0) 收藏 举报  分类: win32(7)  1.简介  ...
    
			
    9. 
						
  9. Skipped Rebuild All: Project with VS2008
			
    This Problem is getting me head around it in these days. BUt , i have solve it: Description of Probl ...
    
			
    10. 
						
  10. Laravel5.2 下使用Form
			
    laravel到了5.1.*以上版本,便没有了illuminate/html类库的支持, 我试着把illuminate/html类库加入了laravel5.2,依然没有用, 但是laravelcoll ...
    
			
    11.