http://bbs.csdn.net/topics/391493648　　canvas实例分享　　2016-3-16

http://bbs.csdn.net/topics/390582151　　html5 canvas 实现液体效果　　2016-5-11

 CANVAS学习笔记，小函数整理：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<style type="text/css">

</style>

</head>

<body>

<h3>canvas学习笔记、小函数整理</h3>

<div style="position:relative;width:500px;height:400px;margin:0px;padding:0px;border:1px solid #999;">

<div style="position:absolute;padding:10px;background:rgba(128,128,128,0.5);bottom:0px;z-index:1">这里写字啦。。。。。。。</div>

<canvas id="canvas" width="500" height="400" style="position:absolute;margin:5px;z-index:0"></canvas>

</div>

或

<canvas id="canvas2" width="500" height="400" style="border:1px solid #999;padding:5px;"></canvas>

<script type="text/javascript">

$(function(){

//画方形

function fang_fill(id,color,x,y,width,height) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

    var context = canvas.getContext("2d");

    context.fillStyle = color;                //"rgba(255,0,0,0.2)";

    context.fillRect(x,y,width,height);

}

//画方形框

function fang_border(id,color,x,y,width,height,borderWidth) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

    var context = canvas.getContext("2d");

    context.lineWidth = 1;

    context.strokeStyle = color;

    context.strokeRect(x,y,width,height);

}

//画圆形

function circle_fill(id,color,x,y,r) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

    var context = canvas.getContext('2d');

    context.beginPath();

    context.arc(x,y,r,0,Math.PI * 2, true);

    context.closePath();

    context.fillStyle = color;

    context.fill();

}

//画扇形（未写好）

function fan_fill(id,color,x,y,r,jiao) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

    var context = canvas.getContext('2d');

    context.beginPath();

    context.lineTo(x,y);

    context.arc(x,y,r,0,Math.PI * jiao, true);

    context.lineTo(x,y);

    context.closePath();

    context.fillStyle = color;

    context.fill();

}

//画五星

function drawStar(id,color,x,y,r) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

    var context = canvas.getContext('2d');

    context.lineWidth = 5;

    context.beginPath();

    var dit = Math.PI * 4 / 5;

    var sin = Math.sin(0) * r + y;

    var cos = Math.cos(0) * r + x;

    console.log(0+":"+0);

    context.moveTo(cos, sin);

    for (var i = 0; i < 5; i++) {

        var tempDit = dit * i;

        sin = Math.sin(tempDit) * r + y;

        cos = Math.cos(tempDit) * r + x;

        context.lineTo(cos, sin);

        console.log(sin+":"+sin+":"+tempDit);

    }

    context.closePath();

    context.strokeStyle = "red";

    context.fillStyle = color;

    context.fill();

}

//画渐变(y方向)

function gradient_y(id,color1,color2,x,y,width,height){

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

    var context = canvas.getContext('2d');

    var g1 = context.createLinearGradient(x,y,x,(y+height));

    g1.addColorStop(0,color1);

    g1.addColorStop(1,color2);

    context.fillStyle = g1;

    context.fillRect(x,y,width,height);

}

//画渐变(x方向)

function gradient_x(id,color1,color2,x,y,width,height){

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

    var context = canvas.getContext('2d');

    var g1 = context.createLinearGradient(x,y,(x+width),y);

    g1.addColorStop(0,color1);

    g1.addColorStop(1,color2);

    context.fillStyle = g1;

    context.scale(0.5, 0.5);

    context.rotate(Math.PI / 4);

    context.translate(100, 100);

    context.fillRect(x,y,width,height);

}

//填充文字

function font_fill(id,txt,x,y){

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

    var context = canvas.getContext("2d");

    context.fillStyle = "#00f";

    context.font = "40px 微软雅黑";

    //context.textBaseline = 'top';

    context.fillText(txt,x,y);

}

//填充文字边框

function font_border(id,txt,x,y){

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

    var context = canvas.getContext("2d");

    context.font = "100px 微软雅黑";

    length = context.measureText(txt);

    context.strokeText(txt,x,y);

}

//保存和恢复状态 （抄的）

function draw18(id) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

    var context = canvas.getContext("2d");

    context.fillStyle = "red";

    context.save(); //保存了当前context的状态

    context.fillStyle = "black";

    context.fillRect(0, 0, 100, 100);

    context.restore();//恢复到刚刚保存的状态

    context.fillRect(0,120,100,100);

}

//保存文件  canvas.toDataURL(MIME)  （抄的）

function draw19(id) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

    var context = canvas.getContext("2d");

    context.fillStyle = "rgb(0,0,225)";

    context.fillRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = "rgb(255,255,0)";

    context.fillRect(10, 20, 50, 50);

    //把图像保存到新的窗口

    var w=window.open(canvas.toDataURL("image/jpeg"),"smallwin","width=400,height=350");

}

//function example(id,color1,color2,x,y,width,height){//

    //context.scale(0.5, 0.5);        //缩放

    //context.rotate(Math.PI / 4);    //旋转

    //context.translate(100, 100);    //平移

    //context.fillRect(x,y,width,height);

//}

//例子代码：

//fang_fill("canvas","#f90",10,10,100,100);

//fang_border("canvas","#f90",8,8,104,104);

//circle_fill("canvas","#a9f",150,150,100);

//fan_fill("canvas","#a9f",150,150,100,1/2);

//drawStar("canvas","#f00",100,100,50);

//gradient_y("canvas","#600","#f00",100,50,200,40);

//gradient_y("canvas","#999","#eee",100,100,200,40);

//gradient_x("canvas","#ff0","#f00",100,150,400,40);

font_fill("canvas","啊啊啊啊啊啊啊啊",0,100);

font_border("canvas","呃呃呃呃",120,130);

});

</script>

</body>

</html>

 划线：

//画线

function line_stroke(id,color,x,y,end_x,end_y) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

    var context = canvas.getContext("2d");

    context.beginPath();//画一条新的线段

    context.strokeStyle = color;

    context.moveTo(x,y);

    context.lineTo(end_x,end_y);

    context.stroke();

}

line_stroke("canvas","#f90",10,10,100,100);

canvas学习笔记、小函数整理的更多相关文章

  1. Matlab学习笔记 figure函数

    Matlab学习笔记 figure函数 matlab中的 figure 命令,能够创建一个用来显示图形输出的一个窗口对象.每一个这样的窗口都有一些属性,例如窗口的尺寸.位置,等等.下面一一介绍它们. ...

  2. matlab学习笔记 bsxfun函数

    matlab学习笔记 bsxfun函数 最近总是遇到 bsxfun这个函数,前几次因为无关紧要只是大概看了一下函数体去对比结果,今天再一次遇见了这个函数,想想还是有必要掌握的,遂查了些资料总结如下. ...

  3. matlab学习笔记13_1 函数返回值

    一起来学matlab-matlab学习笔记13函数 13_1 函数返回值 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 https://blog.csdn.net/qq_36556 ...

  4. 大数据 -- kafka学习笔记：知识点整理（部分转载）

    一 为什么需要消息系统 1.解耦 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险.许多 ...

  5. canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）

    [下篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  6. canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线

    [上篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  7. swift学习笔记2——函数、闭包

    之前学习swift时的个人笔记,根据github:the-swift-programming-language-in-chinese学习.总结,将重要的内容提取,加以理解后整理为学习笔记,方便以后查询 ...

  8. ASP.NET MVC5 及 EF6 学习笔记 - （目录整理）

    个人从传统的CS应用开发(WPF)开始转向BS架构应用开发: 先是采用了最容易上手也是最容易搞不清楚状况的WebForm方式入手:到后面就直接抛弃了服务器控件的开发方式,转而采用 普通页面+Ajax+ ...

  9. canvas学习笔记（中篇） -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理

    [中篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

随机推荐

  1. 20155304 2016-2017-2 《Java程序设计》第九周学习总结

    20155304 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 JDBC简介 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找 JDBC ...

  2. JavaScript 之call , apply 和prototype 介绍

    1. 前言 为什么将这三个概念放在一起说.原因是这些是会在实现js 继承会需要使用到的 2. call 和 apply call 和 apply 的作用基本类似, 都是去执行function并将这个f ...

  3. python pandas Timestamp 转为 datetime 类型

    In [11]: ts = pd.Timestamp('2014-01-23 00:00:00', tz=None) In [12]: ts.to_pydatetime() Out[12]: date ...

  4. 分部视图在ASP.NET MVC中的应用

    概述: 在ASP.NET Web Form的开发经验中,对于User Control使用比较频繁,可以减少重复的代码,利于页面模块化,这个概念也被引入了ASP.NET MVC.即“分部视图”. 1.创 ...

  5. FP-growth算法发现频繁项集（二）——发现频繁项集

    上篇介绍了如何构建FP树,FP树的每条路径都满足最小支持度,我们需要做的是在一条路径上寻找到更多的关联关系. 抽取条件模式基 首先从FP树头指针表中的单个频繁元素项开始.对于每一个元素项,获得其对应的 ...

  6. java 多线程之：sleep() 方法

    sleep()介绍 sleep() 定义在java.lang.Thread中. sleep() 的作用是让当前线程休眠,即当前线程会从"运行状态"进入到"休眠(阻塞)状态 ...

  7. Angular 4 父组件调用子组件中的方法

    1. 创建工程 ng new demo3 2. 创建子组件 ng g component child 3. 在子组件中定义方法greeting 4. 父组件html(第三行是模板中调用子组件的方法) ...

  8. RK3399 Android7.1 try 'jack-diagnose' or see Jack server log

    CPU:RK3399 系统:Android 7.1 Android 7.1系统使用 jack-server 作为 Java 代码编译器 jack-server 由两个配置文件来决定用户使用的端口 /h ...

  9. 百度地图JavaScript如何清除指定类型的覆盖物

    由于一个地图中有很多种类型的覆盖物,由于某个覆盖物(一般是自定义)整个地图中只允许出现一次 那第一想到的就是,每次创建这个类型的覆盖物时先清除这一类型的覆盖物,比较简单判断覆盖物的类型 instanc ...

  10. dede模块管理一片空白或没有列表内容的解决办法

    为什么dede后台模块管理,打开之后一片空白,又或者没有列表,插件与其他模块的使用也是正常的. 这主要是因为我们在安装模块,然后又卸载模块,卸载的时候选择了删除安装文件,就会出这个问题. 这里面分为两 ...