canvas学习笔记1
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="display: block;margin:20px auto;border:1px solid #ccc;"></canvas>
</body>
<script>
window.onload=function(){
var canvas=document.getElementById("canvas"),//canvas后绘制的的图形会遮挡住之前绘制的图形（前提是重叠 而且后者有填充色）
context=canvas.getContext("2d");
canvas.width=800;
canvas.height=800;
context.translate(100,100);//将原点坐标移动到100，100的位置
drawRect(context,0,0,400,400,10,"#058","red");
drawRect2(context,100,100,400,400,10,"green","rgba(0,256,0,.5)");
};
function drawRect(cxt,x,y,width,height,borderWidth,borderColor,fillColor){
cxt.beginPath();
/*cxt.moveTo(x,y);
cxt.lineTo(x+width,y);
cxt.lineTo(x+width,y+height);
cxt.lineTo(x,y+height);*/
cxt.rect(x,y,width,height);//rect方法是创建矩形
//cxt.fillRect(x,y,width,height);//绘制矩形,会通过当前的fillStyle绘制出一个填充的矩形
//cxt.strokeRect(x,y,width,height);//绘制矩形，会通过当前的strokeStyle绘制出带边框的矩形
cxt.closePath();
cxt.lineWidth=borderWidth;
cxt.fillStyle=fillColor;
cxt.strokeStyle=borderColor;
cxt.fill();
cxt.stroke();
}
function drawRect2(cxt,x,y,width,height,borderWidth,borderColor,fillColor){//绘制矩形
cxt.lineWidth=borderWidth;
cxt.fillStyle=fillColor;
cxt.strokeStyle=borderColor;
cxt.fillRect(x,y,width,height);
cxt.strokeRect(x,y,width,height);
}
</script>
</html>
绘制矩形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #ccc;display: block;margin:20px auto;"></canvas>
</body>
<script>
var canvas=document.getElementById("canvas"),
context=canvas.getContext("2d");
canvas.width=800;
canvas.height=800;
context.lineWidth=10;
context.strokeStyle="#058"; context.beginPath();
context.moveTo(100,200);
context.lineTo(700,200);
context.lineCap="butt";//lineCap线段末尾的样式，butt为标准型（默认值） round为突出一段圆形 square为突出一段矩形
context.stroke(); context.beginPath();
context.moveTo(100,400);
context.lineTo(700,400);
context.lineCap="round";//lineCap只能用于线段的开始处和结尾处不能用于线段的连接处
context.stroke(); context.beginPath();
context.moveTo(100,600);
context.lineTo(700,600);
context.lineCap="square";
context.stroke();
</script>
</html>
lineCap介绍
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #ccc;display: block;margin:20px auto">当前浏览器不支持canvas</canvas>
</body>
<script>
window.onload=function() {
var canvas = document.getElementById("canvas");
canvas.width = 1024;//画布的宽度
canvas.height = 768;
var context = canvas.getContext("2d");
/* context.lineWidth=10;
context.lineJoin="miter";//lineJoin默认值是miter表示默认形成一个尖角，bevel斜接的形式，round圆角的形式
context.miterLimit=20;//只有当lineJoin的值为miter时才有效，也就是尖角的内角和外角的最大距离是10，当超过10时 会按照bevel显示*/
context.fillStyle="black";
context.fillRect(0,0,canvas.width,canvas.height); for(var i=0;i<200;i++){
var r=Math.random()*10+10;
var x=Math.random()*canvas.width;
var y=Math.random()*canvas.height;
var a=Math.random()*360;
drawStar(context,x,y,r,r/2,a);
}
};
//绘制五角星
function drawStar(cxt,x,y,outR,innerR,rot){//rot为顺时针旋转的角度
cxt.beginPath();
for(var i=0;i<5;i++){
cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*outR+x,
-Math.sin((18+i*72-rot)/180*Math.PI)*outR+y);
cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*innerR+x,
-Math.sin((54+i*72-rot)/180*Math.PI)*innerR+y);
}
cxt.closePath();
cxt.fillStyle="#fb3";
cxt.strokeStyle="#fd5";
cxt.lineWidth=3;
cxt.lineJoin="round";
cxt.fill();
cxt.stroke();
}
</script>
</html>
绘制五角星1
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #ccc;display: block;margin:20px auto">当前浏览器不支持canvas</canvas>
</body>
<script>
window.onload=function() {
var canvas = document.getElementById("canvas");
canvas.width = 1024;//画布的宽度
canvas.height = 768;
var context = canvas.getContext("2d");
/* context.lineWidth=10;
context.lineJoin="miter";//lineJoin默认值是miter表示默认形成一个尖角，bevel斜接的形式，round圆角的形式
context.miterLimit=20;//只有当lineJoin的值为miter时才有效，也就是尖角的内角和外角的最大距离是10，当超过10时 会按照bevel显示*/
context.fillStyle="black";
context.fillRect(0,0,canvas.width,canvas.height); for(var i=0;i<200;i++){
var r=Math.random()*10+10;
var x=Math.random()*canvas.width;
var y=Math.random()*canvas.height;
var a=Math.random()*360;
drawStar(context,x,y,r,a);
}
};
//绘制五角星
function drawStar(cxt,x,y,R,rot){//rot为顺时针旋转的角度
cxt.save();
cxt.translate(x,y);
cxt.rotate(rot/180*Math.PI);
cxt.scale(R,R);
starPath(cxt);
cxt.fillStyle="#fb3";
/* cxt.strokeStyle="#fd5";
cxt.lineWidth=3;
cxt.lineJoin="round";*/ cxt.fill();
/* cxt.stroke();*/
cxt.restore();
/*cxt.fillStyle="#fb3";
cxt.strokeStyle="#fd5";
cxt.lineWidth=3;
cxt.lineJoin="round";
cxt.fill();
cxt.stroke();*/
}
function starPath(cxt) {
cxt.beginPath();
for(var i=0;i<5;i++){
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),
-Math.sin((18+i*72)/180*Math.PI));
cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
-Math.sin((54+i*72)/180*Math.PI)*0.5);
}
cxt.closePath();
}
</script>
</html>
绘制五角星2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
cursor: not-allowed;
}
</style>
</head>
<body>
<canvas id="canvas" style="display: block;margin:20px auto;border:1px solid #ccc;"></canvas>
</body>
<script>
window.onload=function(){
var canvas=document.getElementById("canvas"),//canvas后绘制的的图形会遮挡住之前绘制的图形（前提是重叠 而且后者有填充色）
context=canvas.getContext("2d");
canvas.width=800;
canvas.height=800; context.save();//保存图形的状态
context.fillStyle="red";
context.translate(100,100);//将原点坐标移动到100，100的位置
context.fillRect(0,0,200,200);
context.restore();//恢复图形的状态，
context.fillStyle="green";
context.translate(100,100);//如果前边已经有translate属性，这时translate中的属性值应该累加，translate值其实为200，200，如果代码中存在restore方法，则说明已经恢复的图形的状态，此时translate值为替换，不是累加
context.fillRect(100,100,200,200);
};
</script>
</html>
save restore介绍
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
cursor: not-allowed;
}
</style>
</head>
<body>
<canvas id="canvas" style="display: block;margin:20px auto;border:1px solid #ccc;"></canvas>
</body>
<script>
window.onload=function(){
var canvas=document.getElementById("canvas"),//canvas后绘制的的图形会遮挡住之前绘制的图形（前提是重叠 而且后者有填充色）
context=canvas.getContext("2d");
canvas.width=800;
canvas.height=800; context.save();//保存图形的状态
context.fillStyle="red";
context.translate(100,100);//将原点坐标移动到100，100的位置
context.fillRect(0,0,200,200);
context.restore();//恢复图形的状态，
context.fillStyle="green";
context.translate(100,100);//如果前边已经有translate属性，这时translate中的属性值应该累加，translate值其实为200，200，如果代码中存在restore方法，则说明已经恢复的图形的状态，此时translate值为替换，不是累加
context.fillRect(100,100,200,200);
};
</script>
</html>
translate介绍
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="display: block;margin:20px auto; border: 1px solid #ccc"></canvas>
</body>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
canvas.width=800;
canvas.height=800;
// transform(a,b,c,d,e,f) a,d表示水平、垂直缩放。b，c表示水平、垂直倾斜。e，f表示水平、垂直位移
/* context.fillStyle="red";
context.strokeStyle="#058";
context.save();
//当页面中有多个transform时，transform值是累加的，不是覆盖的
context.transform(2,0.2,0.2,1.5,50,100);//表示在水平方向移动50像素 垂直方向移动100像素 水平方向缩放2倍 垂直方向缩放1.5倍 水平和垂直方向都倾斜0.2
context.transform(1,0,0,1,50,100);
//setTransform为设置当前的transform值，不管前边设置的transform值为多少 setTransform表示设置当时的transform值为多少
context.setTransform(1,0,0,1,100,100);
context.fillRect(50,50,300,300);
context.strokeRect(50,50,300,300);
context.restore();*/
var linearGrad=context.createLinearGradient(0,0,800,800);//线性渐变的起始坐标为0,0 终止坐标为800,800 当渐变位置小于画布的尺寸时，剩下的区域以最后的填充色。如果渐变位置超出画布的尺寸则不显示
/*linearGrad.addColorStop(0.0,"#fff");//添加渐变色 最小值是0（也就是起点是白色），最大值是1（终点是黑色）
linearGrad.addColorStop(1.0,"#000");*/
linearGrad.addColorStop(0.0,"white");
linearGrad.addColorStop(0.25,"yellow");
linearGrad.addColorStop(0.5,"green");
linearGrad.addColorStop(0.75,"blue");
linearGrad.addColorStop(1.0,"black");
context.fillStyle=linearGrad;
context.fillRect(0,0,800,800)
</script>
</html>
线性渐变和 setTransform
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="display: block;margin:20px auto; border: 1px solid #ccc"></canvas>
</body>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
canvas.width=800;
canvas.height=800;
// transform(a,b,c,d,e,f) a,d表示水平、垂直缩放。b，c表示水平、垂直倾斜。e，f表示水平、垂直位移
/* context.fillStyle="red";
context.strokeStyle="#058";
context.save();
//当页面中有多个transform时，transform值是累加的，不是覆盖的
context.transform(2,0.2,0.2,1.5,50,100);//表示在水平方向移动50像素 垂直方向移动100像素 水平方向缩放2倍 垂直方向缩放1.5倍 水平和垂直方向都倾斜0.2
context.transform(1,0,0,1,50,100);
//setTransform为设置当前的transform值，不管前边设置的transform值为多少 setTransform表示设置当时的transform值为多少
context.setTransform(1,0,0,1,100,100);
context.fillRect(50,50,300,300);
context.strokeRect(50,50,300,300);
context.restore();*/
var radialGrad=context.createRadialGradient(400,400,0,400,400,500);//径向渐变 第一个圆的圆心位置是400,400，半径是0，第二个圆的圆心位置是400,400，半径是500
radialGrad.addColorStop(0.0,"white");
radialGrad.addColorStop(0.25,"yellow");
radialGrad.addColorStop(0.5,"green");
radialGrad.addColorStop(0.75,"blue");
radialGrad.addColorStop(1.0,"black");
context.fillStyle=radialGrad;
context.fillRect(0,0,800,800)
</script>
</html>
径向渐变
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="display: block;margin:20px auto; border: 1px solid #ccc"></canvas>
</body>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
canvas.width=800;
canvas.height=800;
/* var backgroundImage=new Image();
backgroundImage.src="zs_content_bg.jpg";
backgroundImage.onload=function(){
var pattern=context.createPattern(backgroundImage,"no-repeat");//创建背景图 createPattern中第一个参数除了可以是图片外 还可以是canvas和video视频
context.fillStyle=pattern;
context.fillRect(0,0,800,800)
};*/
var backCanvas=createBackgroundCanvas();
var pattern=context.createPattern(backCanvas,"repeat");
context.fillStyle=pattern;
context.fillRect(0,0,800,800);
function createBackgroundCanvas(){
var backCanvas=document.createElement("canvas");
backCanvas.width=100;
backCanvas.height=100;
var backCanvasContext=backCanvas.getContext("2d");
drawStar(backCanvasContext,50,50,50,0);
return backCanvas;
}
function drawStar(cxt,x,y,R,rot){
cxt.save();
cxt.translate(x,y);
cxt.rotate(rot/180*Math.PI);
cxt.scale(R,R);
starPath(cxt);
cxt.fillStyle="#fb3";
cxt.fill();
}
function starPath(cxt){
cxt.beginPath();
for(var i=0;i<5;i++){
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),
-Math.sin((18+i*72)/180*Math.PI));
cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
-Math.sin((54+i*72)/180*Math.PI)*0.5);
}
cxt.closePath();
}
</script>
</html>
用图片填充canvas
canvas学习笔记1的更多相关文章
- canvas学习笔记、小函数整理
http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...
- canvas学习笔记，实用知识点总结（上）
本博客是本人日常学习笔记,作为重要知识点的总结记录,随笔风格可能更倾向于个人的学习习惯和方式,若对您有帮助十分荣幸,若存在问题欢迎互相学习探讨,前端小白一枚在此恭候. 一.基本使用规则 1.创建画布 ...
- canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）
[下篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- canvas学习笔记（中篇） -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理
[中篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线
[上篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- canvas学习笔记一
为了研究pixi库,就顺带从头到位学习下canvas吧 判断支持力度 var webgl = (function() { try { var canvas = document.createEleme ...
- canvas学习笔记：canvas对图片的像素级处理--ImageData的应用
学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...
- canvas学习笔记（一）-认识canvas
canvas是html5新增的一个标签,主要用于图形的绘制.我们可以把它理解为是浏览器给我们提供了一个画板,至于要绘制怎样的画卷,就看神笔马良你的主意了.而在canvas上绘制图形使用的笔,就是js了 ...
- 【canvas学习笔记一】基本认识
<canvas>标签定义了一块画布,画布可以在网页中绘制2D和3D图象,现在先学习如何绘制2D图象,绘制3D图象属于WebGL的内容(也就是网页版的OpenGL,3D图形接口). 属性 & ...
- 【canvas学习笔记二】绘制图形
上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...
随机推荐
- 图标插件FusionChartsFree
二.介绍 Ø FusionCharts 是InfoSoft Global 公司的一个产品,InfoSoft Global 公司是专业的Flash 图形方案提供商,他们还有几款其他的,基于Flash 技 ...
- linux 图解常用的云运维监控工具
随着新技术的不断发展,云服务已经互联网企业的必须,但是长期以来会存在传统物理主机和云主机.私有云和公有云并存的状态.此外,互联网企业的发展速度非常快,小米.滴滴出行等很多企业都是在短短几年内发展起来的 ...
- C# OO（初级思想）。
继承,多态,封装 在C#中,为了能够合理描述自然界的规律,面向对象的编程引入了继承的概念,是面向对象编程中最重要的概念之一,定义了如何根据现有的类创建新类的过程. 继承:一个类派生出来的子类具有这个类 ...
- ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法（ajaxfileupload.js第一弹）
在写这篇的时候本来想把标题直接写成报错的提示,如下: “SecurityError:Blocked a frame with origin "http://localhost:55080&q ...
- 小程序异步处理demo计时器setInterval()
实现一个计时器/秒 其实就是要求对某字段每秒执行一次更新 这里用到了官方给的定时器 官方API 每秒刷新一次,所以用setInterval()方法 下面给出关键代码: 由于无关代码过多,这里尽可能贴出 ...
- redux、immutablejs和mobx性能对比（三）
四.我的结论 通过第三部分的数据数据分析,我觉得我们可以得到以下结论: 无论是在开发环境还是测试环下页面的首次加载速度结果都是:redux>immutablejs>mobx,但是他们之间的 ...
- C#可遍历的集合
public class Product { /// <summary> /// 自增ID /// </summary> public int ID { get; set; } ...
- 转：centos7.2安装jdk1.6和/etc/profile不生效问题
转:centos7.2安装jdk1.6和/etc/profile不生效问题 转自:http://blog.csdn.net/cuker919/article/details/54178611 一.查看 ...
- 【javascript】javascript设计模式之单例模式
单例模式: 定义:单例模式之所以这么叫,是因为它限制一个类只能有一个实例化对象. 实现方法:判断实例是否存在,如果存在则直接返回,如果不存在就创建了再返回.(确保一个类只有一个实例对象) 特点: 命名 ...
- 12 步 30 分钟，完成用户管理的 CURD 应用 (react+dva+antd)
Getting Started https://github.com/dvajs/dva/blob/master/docs/GettingStarted.md -------------------- ...