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所有的基础知识,并且有众多练习案例, ...

随机推荐

ZOJ2345Gold Coins
昨天做过一样的题: 平方和公式:n*(n+1)*(2n+1)/6 #include<cstdio> #include<cstdlib> #include<iostream ...
hdu2065 "红色病毒"问题指数型母函数
关于指数型母函数的题目,通过用公式并展开得到系数做的吧,取最后两位就是对100取模 #include<stdio.h> int QuickPow(int a,long long n,int ...
java时间处理--持续时间格式化工具和常量类DurationFormatUtils
阅读目录 DurationFormatUtils类简介 maven地址构造方法 DurationFormatUtils() formatDurationHMS(long durationMillis ...
LG1116 【车厢重组】
前言看了大家的做法,什么冒泡排序,插入排序,树状数组,线段树,都好厉害呐,我都没想出来但我发现竟然还没有人用主席树,于是我跟大家交流一下主席树做法显然我们有 \(Ans=\sum_{i=1} ...
LG1600 天天爱跑步
题意分析对一个(s,t)查询,令f=lca(s,t),则操作可化为(s,f),(f,t). 考虑观察到的情况,若x在s到t的路径上,且x观察到,则 \[ \textrm{dep}_s-\textr ...
pandas Timestamp的用法
(Timestamp('2018-08-01 00:00:00'), <class 'pandas._libs.tslibs.timestamps.Timestamp'>) 注意这里面的T ...
VS2017增加数据库连接串
新装VS2017后,按照三石提供的MVC入门教程,创建MVC应用后,能生成数据库文件(在APP_DATA目录),但无法创建连接,服务器路径一直不正确. 解决方法: 1.重新打开VS2017安装界面,选 ...
【linux】Linux 进程状态
linux上进程有5种状态: 1. 运行(正在运行或在运行队列中等待) 2. 中断(休眠中, 受阻, 在等待某个条件的形成或接受到信号) 3. 不可中断(收到信号不唤醒和不可运行, 进程必须等待直到有 ...
ask 调用时间标签
织梦时间调用标签大全(2012-08-03 12:50:13) 转载▼ 分类: 织梦织梦首页时间标签1,11-20 样式([field:pubdate function='strftime(& ...
webpack4构建react脚手架
create-react-app 脚手架还没有更新到webpack4,但是猛然间发现webpack4已经到 v4.12.0 版本了!!!慌得不行,正好端午有空所以研究了一波,自己搭建了一个简单的rea ...

canvas学习笔记、小函数整理

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

随机推荐

热门专题