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. eclipse：运行 Android 项目时出现 “Unable to execute dex: Multiple dex files define” 解决方法
			
    android 项目在eclipse 出现Unable to execute dex: Multiple dex files define Conversion to Dalvik format fa ...
    
			
    2. 
						
  2. 通过button提交表单
			
    通过 input button 而不是input submit提交. <!DOCTYPE html> <html lang="en"> <head&g ...
    
			
    3. 
						
  3. Android  TextView背景颜色与背景图片设置
			
    Android TextView 背景颜色与背景图片设置,android textview 控件,android textview 背景, android textview 图片,android te ...
    
			
    4. 
						
  4. 【HDOJ】2585 Hotel
			
    字符串水题. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 55 cha ...
    
			
    5. 
						
  5. python通过代理刷网页点击量
			
    python通过代理刷网页点击量 更新异常处理情况 @time 2013-0803 更新循环里计数问题和随机等待时间问题 #!/usr/bin/python #-*- coding:utf-8 -*- ...
    
			
    6. 
						
  6. 【转】【Android UI设计与开发】之详解ActionBar的使用，androidactionbar
			
    原文网址:http://www.bkjia.com/Androidjc/895966.html [Android UI设计与开发]之详解ActionBar的使用,androidactionbar 详解 ...
    
			
    7. 
						
  7. C plus plus primer plus
			
    1,运算符,操作数; 使用相同的符号(基本运算符,+ - * /  %),进行多种操作(指使用一个运算符符号,对不用类型的变量进行操作,int ,float,double),此概念将运算符的重载(op ...
    
			
    8. 
						
  8. javascript中闭包的真正作用
			
    参考阮一峰的文章:http://javascript.ruanyifeng.com/grammar/function.html#toc23 1. 读取函数内部变量,封装一些私有属性 function  ...
    
			
    9. 
						
  9. Spring3 MVC 使用JSON进行前后台数据交互
			
    http://wbj0110.iteye.com/blog/2007918 在 Spring3 中,响应.接受 JSON都十分方便.向前台返回 JSON 格式的数据: 1 2 3 4 5 6 7 8  ...
    
			
    10. 
						
  10. android 绘图
			
    在main.xml文件中代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout  ...
    
			
    11.