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. Android Activity设置为全屏的方法
			
    1:代码方式: 放到setContentView之前 //隐藏标题栏 this.requestWindowFeature(Window.FEATURE_NO_TITLE); //隐藏状态栏 this. ...
    
			
    2. 
						
  2. IIS not allow PUT and DELETE method
			
    refer : http://stackoverflow.com/questions/10906411/asp-net-web-api-put-delete-verbs-not-allowed-iis ...
    
			
    3. 
						
  3. web api 2 学习笔记 (Odata ODataQueryOptions 使用)
			
    [ODataRoutePrefix("products")] public class ProductController : BaseController { [ODataRou ...
    
			
    4. 
						
  4. Eclipse插件管理
			
    Eclipse 的特色之一,就是它的插件功能.可以说, Eclipse 是一个插件的大集合,所有的模块都以插件的形式存在.那么,究竟什么是插件呢? 插件( plug-in ),即 Eclipse 的功 ...
    
			
    5. 
						
  5. c# 实现文件拖入和拖出(拖拽)
			
    摘自:http://www.cnblogs.com/eaglet/archive/2009/01/06/1370149.html C# WinForm下一步一步实现文件的拖入和拖出 作者:Eaglet ...
    
			
    6. 
						
  6. 转自http://blog.sina.com.cn/daylive——C++ STL set&multiset
			
    C++ STL set和multiset的使用 1,set的含义是集合,它是一个有序的容器,里面的元素都是排序好的,支持插入,删除,查找等操作,就  像一个集合一样.所有的操作的都是严格在logn时间 ...
    
			
    7. 
						
  7. JDK、JRE和JVM的区别与联系
			
    首先来说一下JDK JDK(Java Development Kit) 是 Java 语言的软件开发工具包(SDK). JDK是整个JAVA的核心,包括了Java运行环境(Java Runtime E ...
    
			
    8. 
						
  8. 浏览器开发 IE webkit chrome浏览器定制
			
    FAQ:制作自己的浏览器有何意义?1.浏览器按照您的需求命名,可自定义LOGO,对您的产品或者公司都有推广作用.2.在帮助一栏的主页以及软件安装的网页链接都可以设为您网站的链接. 3.可将首页设置为您 ...
    
			
    9. 
						
  9. shellAPP
			
    1,linux操作日志记录,记录从各个ip登陆到系统的账号,指向命令及命令执行时间 #!/bin/bashecho "export PROMPT_COMMAND='{ msg=\$(hist ...
    
			
    10. 
						
  10. 型牌男装施春蕾：分拆让马云对淘宝定位更清晰--互联网 -- CCTIME飞象网
			
    型牌男装施春蕾:分拆让马云对淘宝定位更清晰--互联网 -- CCTIME飞象网 型牌男装施春蕾:分拆让马云对淘宝定位更清晰          2011年6月17日 13:16  CCTIME飞象网   ...
    
			
    11.