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所有的基础知识,并且有众多练习案例, ...
随机推荐
- LeetCode-Microsoft-Populating Next Right Pointers in Each Node
Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *nex ...
- from表单的分向提交
一:需求: 思路:document.form.action,表单分向提交,javascript提交表单同一个表单可以根据用户的选择,提交给不同的后台处理程序.即,表单的分向提交.如,在编写论坛程序时, ...
- MySQL Transaction--RC和RR区别
在MySQL中,事务隔离级别RC(read commit)和RR(repeatable read)两种事务隔离级别基于多版本并发控制MVCC(multi-version concurrency con ...
- OASGraph 转换rest api graphql 试用
创建rest api lb4 appdemo 参考提示即可 安装 OASGraph git clone https://github.com/strongloop/oasgraph.git cd oa ...
- smarty学习——编写扩展
在进行了以上的开发环境的配置之后就是,进行进一步的学习,为了开发的方便我们一般会使用oop的编程思想,进行方便的处理 如下: 1.smartyUser 的创建 <?php require_onc ...
- js 验证代码部分的简单实现
接上面的文章. 我们已经简单的设计了关于如何进行处理了,但是如何进行校验呢,代码也是比较简单的因为我们使用的是asp.net 简单并且功能强大. 我们同样使用的是HttpResponse,简单的模拟代 ...
- openwrt lamp
https://applefreak111.wordpress.com/2013/03/12/howtoopenwrt-lamp-stack%E5%AE%89%E8%A3%9D/ opkg updat ...
- Servlet是单例的吗?
如题,是吗?首先我们得搞清楚啥是单例.一聊起单例,条件反射的第一个想到的自然是单例模式.单例模式的定义:一个类有且仅有一个实例,并且自行实例化向整个系统提供.如果按照Java中单例的定义,那么当Ser ...
- [C++ Primer] : 第10章: 泛型算法
概述 泛型算法: 称它们为"算法", 是因为它们实现了一些经典算法的公共接口, 如搜索和排序; 称它们是"泛型的", 是因为它们可以用于不同类型的元素和多种容器 ...
- django orm 常用查询筛选
大于.大于等于 __gt 大于 __gte 大于等于 User.objects.filter(age__gt=10) // 查询年龄大于10岁的用户 User.objects.filter(age__ ...