Canvas -画图

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();
 
//弧线   开始

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 -画图的更多相关文章

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

随机推荐

Swift—扩展声明-备
声明扩展的语法格式如下: extension 类型名 { //添加新功能 } 声明扩展的关键字是extension,“类型名”是Swift中已有的类型,包括类.结构体和枚举,但是我们仍然可以扩展整型. ...
HttpCookie
参考 : http://www.cnblogs.com/fish-li/archive/2011/07/03/2096903.html 上文结尾有提到一个说法 4. HttpRequest.Cooki ...
iconv any encoding to UTF-8
http://stackoverflow.com/questions/9824902/iconv-any-encoding-to-utf-8
C语言#pragma预处理
在所有的预处理指令中,#pragma 指令可能是最复杂的了,它的作用是设定编译器的状态或者是指示编译器完成一些特定的动作.#pragma 指令对每个编译器给出了一个方法,在保持与C 和C ++语言完全 ...
HDOJ(HDU) 1465 不容易系列之一(错排)
Problem Description 大家常常感慨,要做好一件事情真的不容易,确实,失败比成功容易多了! 做好"一件"事情尚且不易,若想永远成功而总从不失败,那更是难上加难了,就 ...
linux中断处理程序
Linux进行中断处理的4个步骤: 1.当中断产生,跳到统一入口IRQ_SVC 2.获取中断号 3.根据中断号找到irq_desc结构 4.从irq_desc结构中取出事先注册好的中断处理函数 Lin ...
Codeforces Round #316 (Div. 2) D、E
Problem D: 题意:给定一棵n个点树,每个点有一个字母,有m个询问,每次询问某个节点x的子树中所有深度为k的点能否组成一个回文串分析:一堆点能组成回文串当且仅当数量为奇数的字母不多于1个,显 ...
Linux下安装GCC5.3.0（亲测有效）
对于linux小白来说,只需要先知道怎么安装,至于为什么等学了linux再说吧..知识不系统的坏处啊! 首先,一般ubuntu上都预装了低级版本的Gcc,完全可以应付刷OJ时的C+Class+STL的 ...
Git分支学习总结
思维导图: 总结: Git分支:分为2类合计为5种分支. 第一类:主分支和开发分支. 第二类:特性分支,热补丁分支,版本分支.
MYSQL视图的学习笔记
MYSQL视图的学习笔记,学至Tarena金牌讲师,金色晨曦科技公司技术总监沙利穆课程笔记的综合. 视图及图形化工具 1. 视图的定义视图就是从一个或多个表中,导出来的表,是一个虚 ...

Canvas -画图

Canvas -画图的更多相关文章

随机推荐

热门专题