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. 【JVM】jvm的jps命令

    jps -- Java Virtual Machine Process Status Tool 可以列出本机所有java进程的pid jps [ options ] [ hostid ] 选项 -q ...

  2. <frameset>框架集中不同<frame>之间的调用【js代码中】

    top:永远指分割窗口最高层次的浏览器窗口;parent:包含当前分割窗口的父窗口,本文将围绕js中top.parent.frame进行讲述及他们的应用案例 引用方法top: 该变量永远指分割窗口最高 ...

  3. leetcode:Reverse Words in a String【Python版】

    class Solution: # @param s, a string # @return a string def reverseWords(self, s): ss = s.split(&quo ...

  4. StreamSets SDC RPC Pipelines说明

    主要目的是进行跨pipeline 数据的通信,而不仅仅是内部pipeline 的通信,之间不同网络进行通信 一个参考图 pipeline 类型 origin destination 部署架构 使用多个 ...

  5. mac 下 mysql 安装

    1. 下载安装文件: 下载地址:https://dev.mysql.com/downloads/mysql/ 下载后缀名为dmg的安装文件 2. 启动mysql 安装后,打开"系统偏好设置& ...

  6. python下爬某个网页的图片

    #coding=utf-8 import re import urllib def getHtml(url): #获取url对应得源码 page = urllib.urlopen(url) html ...

  7. Robomongo，Mongo可视化工具

    哇唔,其实她是三(阴险脸). 你看你看,界面清新,让人家心旷神怡(害羞),谁还想win+R+mongo呀呀呀?! 哎呀呀,继续···说正事. 在这里···借助SQL进一步理解下MongoDB SQL术 ...

  8. 两种获取MySql数据库中所有表的主键和外键约束信息的Sql语句

    最近在写Rafy底层的一些东西,在数据库方面把MySql数据库集成到里面去,里面有一个需求,需要获取非系统数据库,也就是我们自己建立的数据库中所有表的主键和外键元数据列表. 第一种方法:是网上的方法, ...

  9. Mono.Cecil 修改目标.NET的IL代码保存时报异常的处理。

    使用Mono.Cecil对目标.NET的DLL程序进行IL修改后保存时报“Failed to resolve assembly: ' xxxxxx, version=xxxxx,Culture=xxx ...

  10. vim配置之目录结构

    我喜欢作配置分离,这样比较好管理,这里直接贴一下tree的目录结构 xxx@debian:~/vimConfig$ tree . ├── install │   ├── install.sh │   ...