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. openLayers 4 canvas图例绘制，canvas循环添加图片，解决图片闪烁问题

    一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...

  2. HPU 1127：【C语言程序设计】[7.4.2]最大元素（排序）

    [C语言程序设计][7.4.2]最大元素 时间限制: 1 Sec 内存限制: 128 MB提交: 386 解决: 139 题目描述 编一个程序,读入n个元素的实型数组,然后调用一个函数,递归地找出其中 ...

  3. 最优比率生成树 POJ 2728 迭代或者二分

    别人解题报告的链接: http://blog.sina.com.cn/s/blog_691190870101626q.html 说明一下关于精度的问题,当结果是精确到小数点后3为,你自然要把误差定为至 ...

  4. Python的学习之-计算机编码和二进制

    bit位,计算机中最小的表示单位 8bit = 1bytes字节,最小的储存单位,1bytes缩写为1b 1KB = 1024B 1MB = 1024KB 1GB = 1024MB 1TB = 102 ...

  5. jQuery插件制作方法详解

        jQuery插件制作方法详解   jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...

  6. Git的一些基本操作和命令

    1.创建版本库 在D盘中打开Git Bash Here 1.1.创建一个空目录 Mkdir gitDemo –创建一个目录 Cd gitDemo  --进入gitDemo目录 Pwd –查看当前目录的 ...

  7. js 数组方法比较

    js 数组方法比较 table th:first-of-type { width: 80px; } table th:nth-of-type(2) { width: 120px; } table th ...

  8. Vuejs项目的Webpack2构建优化

    最近在做的项目因为相对较大(打包有100多个chunk),在build构建的时候速度一直上不去,甚是烦恼.由于用的是vue-cli的webpack2模板,一开始并没有想着要对其进行优化,一直觉得是we ...

  9. svn 报错及解决

    报错: svn: E155015: One or more conflicts were produced while merging r68508:73308 into '[分支]' -- reso ...

  10. phper必知必会之类库自动加载的七种方式（三）

    ## php自动加载 下面显示例子的文件目录结构图 一.没有使用命名空间的几种实现 test/oneClass.php class oneClass{ public function show(){ ...