canvas学习笔记、小函数整理

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学习笔记、小函数整理的更多相关文章

Matlab学习笔记 figure函数
Matlab学习笔记 figure函数 matlab中的 figure 命令,能够创建一个用来显示图形输出的一个窗口对象.每一个这样的窗口都有一些属性,例如窗口的尺寸.位置,等等.下面一一介绍它们. ...
matlab学习笔记 bsxfun函数
matlab学习笔记 bsxfun函数最近总是遇到 bsxfun这个函数,前几次因为无关紧要只是大概看了一下函数体去对比结果,今天再一次遇见了这个函数,想想还是有必要掌握的,遂查了些资料总结如下. ...
matlab学习笔记13_1 函数返回值
一起来学matlab-matlab学习笔记13函数 13_1 函数返回值觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 https://blog.csdn.net/qq_36556 ...
大数据 -- kafka学习笔记：知识点整理（部分转载）
一为什么需要消息系统 1.解耦允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险.许多 ...
canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）
[下篇] -- 建议学习时间4小时课程共(上中下)三篇此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线
[上篇] -- 建议学习时间4小时课程共(上中下)三篇此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
swift学习笔记2——函数、闭包
之前学习swift时的个人笔记,根据github:the-swift-programming-language-in-chinese学习.总结,将重要的内容提取,加以理解后整理为学习笔记,方便以后查询 ...
ASP.NET MVC5 及 EF6 学习笔记 - （目录整理）
个人从传统的CS应用开发(WPF)开始转向BS架构应用开发: 先是采用了最容易上手也是最容易搞不清楚状况的WebForm方式入手:到后面就直接抛弃了服务器控件的开发方式,转而采用普通页面+Ajax+ ...
canvas学习笔记（中篇） -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理
[中篇] -- 建议学习时间4小时课程共(上中下)三篇此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

随机推荐

PHPEmailer使用简介（以qq邮箱为例）
1.从网上下载PHPEmailer: 2.确保PHP环境支持sockets扩展,还要开启openssl,如下图: 3.配置QQ邮箱 1.开启SMTP服务 2.验证密保 3.获取授权码(这个就是IMAP ...
.NET Core Generic Host Windows服务部署使用Topshelf
此文源于前公司在迁移项目到.NET Core的过程中,希望使用Generic Host来管理定时任务程序时,没法部署到Windows服务的问题,而且官方也没给出解决方案,只能关注一下官方issue # ...
前端学习——jquery操作例子
一.jquery和DOM函数的转换 . jquery转换成dom $(] . dom转换成jquery var i1=documen.getElementById('#i1')---------> ...
Spring Data JPA Hibernate @QueryHints
另一个实例: http://leobluewing.iteye.com/blog/2032396 : 本文内容来源:https://blog.csdn.net/gavinchen1985/articl ...
Anaconda+Tensorflow环境安装与配置
转载请注明出处:http://www.cnblogs.com/willnote/p/6746499.html Anaconda安装在清华大学 TUNA 镜像源选择对应的操作系统与所需的Python版 ...
JUC集合之 ConcurrentLinkedQueue
ConcurrentLinkedQueue介绍 ConcurrentLinkedQueue是线程安全的队列,它适用于"高并发"的场景. 它是一个基于链接节点的无界线程安全队列,按照 ...
java 的关键字 native
native native 关键字说明其修饰的方法是一个原生态方法,方法对应的实现不是在当前文件,而是在用其他语言(如C和C++)实现的文件中.Java语言本身不能对操作系统底层进行访问和操作,但是可 ...
jquery select radio
Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为S ...
Flask视图函数与普通函数的区别，响应对象Response
视图函数与普通函数看似没什么区别,其实他们的返回值上有着很大的区别. from flask import Flask app = Flask(__name__) @app.route('/hello' ...
Extjs 分页传参方法
第一种(常用): var proxy = new Ext.data.HttpProxy({url : url}) var store = new Ext.data.Store({ pruneModif ...

canvas学习笔记、小函数整理

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

随机推荐

热门专题