Canvas学习
1、<canvas><canvas>标签
var canvas = document.getElementById("line"); //获取画布节点
canvas.width =1366; //设置画布的宽
canvas.height =600; //设置画布的高
if(canvas.getContext){
var ctx = line.getContext("2d");
ctx.moveTo(100,100); //移动到位置(100,100)
ctx.lineTo(500,500); //从位置(100.100)画线到 位置 (500,500)
ctx.lineTo(100,500); //从位置(500,500)画线到 位置 (100,500)
ctx.lineTo(100,100);
ctx.stroke();
}

var canvas = document.getElementById("line");
canvas.width =1366;
canvas.height =600;
if(canvas.getContext){
var ctx = line.getContext("2d");
ctx.beginPath();// 开始一段新的画
ctx.moveTo(100,100);
ctx.lineTo(500,500);
ctx.lineTo(100,500);
10 ctx.lineTo(100,100);
11 ctx.fillStyle ="#6699cc"; //设置填充颜色
ctx.fill(); //执行填充操作
ctx.lineWidth =5; //设置线宽
ctx.strokeStyle ="rgba(0,255,0,.5)"; //设置画线的颜色
ctx.stroke(); //画线(会基于之前设置的三个 lineTo的坐标位置而依次画图)
ctx.closePath(); //结束这段画
}

var tangram =[
{p:[{x:100,y:100},{x:300,y:300},{x:500,y:100}],color:'#CAFF67'},
{p:[{x:100,y:100},{x:300,y:300},{x:100,y:500}],color:'#6699CC'},
{p:[{x:100,y:500},{x:200,y:400},{x:300,y:500}],color:"pink"},
{p:[{x:200,y:400},{x:300,y:300},{x:400,y:400},{x:300,y:500}],color:'purple'},
{p:[{x:300,y:300},{x:400,y:200},{x:400,y:400}],color:'yellow'},
{p:[{x:400,y:200},{x:500,y:100},{x:500,y:300},{x:400,y:400}],color:'red'},
{p:[{x:300,y:500},{x:500,y:300},{x:500,y:500}],color:'orange'}
]
window.onload =function(){
var canvas = document.getElementById("line"),
i =0;
canvas.width =1366;
canvas.height =600;
if(canvas.getContext){
var context = canvas.getContext("2d");
for(i =0;i<tangram.length;i++){
draw(tangram[i],context)
}
}
}
function draw(piece,cxt){
cxt.beginPath();
cxt.moveTo(piece.p[0].x,piece.p[0].y);
var i =1;
for(;i < piece.p.length;i++){
cxt.lineTo(piece.p[i].x,piece.p[i].y);
}
cxt.closePath();
cxt.fillStyle=piece.color;
cxt.fill();
cxt.fillStyle ="#000000";
cxt.lineWidth =3;
cxt.stroke();
}


Canvas学习的更多相关文章
- canvas学习之API整理笔记(二)
前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...
- canvas学习(一)
Canvas 学习之路 (一) canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面. 因为对前端无限的爱好,更加对canvas充满好奇,将我学习canvas的 ...
- canvas学习和面向对象(二)
Canvas 学习(二) 上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形. 现在开始绘制图片和动画帧,以及面向对象的升级版本. 还是一样,看代码,所有的代码都托管在git ...
- canvas学习总结六:绘制矩形
在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...
- canvas学习笔记、小函数整理
http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...
- canvas学习(三):文字渲染
一.绘制基本的文字: var canvas = document.getElementById("myCanvas") var ctx = canvas.getContext('2 ...
- canvas学习(二):渐变与曲线的绘制
canvas学习(二):渐变与曲线的绘制 一:createLinearGradient()线性渐变: 二:createLinearGradient() 放射状/圆形渐变: 三:createPatter ...
- canvas学习(一):线条,图像变换和状态保存
canvas学习(一):线条,图像变换和状态保存 一:绘制一条线段: var canvas = document.getElementById('canvas') var ctx = canvas.g ...
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- canvas学习之API整理笔记(一)
其实canvas本身很简单,就是去学习它的API,多看实例,多自己动手练习,多总结.但是canvas的API实在是有点多,对于初学者来说,可能学到一半就止步不前了.我也有这种感觉,在学习的过程中,编写 ...
随机推荐
- 为Docker容器指定自定义网段的固定IP/静态IP地址
第一步:创建自定义网络 备注:这里选取了172.172.0.0网段,也可以指定其他任意空闲的网段 docker network create --subnet=172.172.0.0/16 docke ...
- SQL AND & OR 运算符
AND 和 OR 运算符用于基于一个以上的条件对记录进行过滤. AND 和 OR 运算符 AND 和 OR 可在 WHERE 子语句中把两个或多个条件结合起来. 如果第一个条件和第二个条件都成立,则 ...
- Python之调用函数
Python之调用函数 Python内置了很多有用的函数,我们可以直接调用. 要调用一个函数,需要知道函数的名称和参数,比如求绝对值的函数 abs,它接收一个参数. 可以直接从Python的官方网站查 ...
- Maven-003-私人定制 maven archetype
在使用 Maven 创建项目模块的时候,依据其默认的 archetype 模板,创建出的目录.及默认的单元测试工具为 JUnit 3.8.1,而且有些常用的资源文件目录.配置文件(例如:Log4J 的 ...
- wpa supplicant 保存 wifi 设置
wpa suppliclant使用wpa gui连接wifi后,下次开机的时,不能保存,需要从新手动进行连接. 自动保存方法: 配置文件/etc/wpa_supplicant.conf 添加 upda ...
- windows的Timer和写文件方式串口注意!
1.Timer要读取并分发消息,才能触发自定义回调函数 SetTimer(NULL, 1, 40, (TIMERPROC)TimerProc); while(GetMessage(&msg, ...
- iOS:搭建本地的服务器
一.介绍 作为一个专业的程序员,不管你是前端还是移动端或者是后台,能够自己试着搭建一个本地的服务器还是很有必要的,有的时候,我们可以自己测试一些数据,很方便开发.其实,mac是自带有本地的服务器的,用 ...
- 字节流和字符流(BufferedReader类和BufferedWriter类)
一般情况下,为了提高字符文件读/写效率,通常需要为文件读/写器添加一个缓冲读/写器,分别为BufferedReader类和BufferedWriter类. 1:BufferedReader类 假如上面 ...
- selenium and win32api
I:Web 测试 selenium-2.45.0 python 2.7.8 win32api http://sourceforge.net/projects/pywin32/files/pywin32 ...
- 注解的基本盘点 -- 《Java编程思想》
注解(元数据)为我们在代码中添加信息提供了一种形式化的方法,使我们可以在之后的某一个时刻非常方便地使用这些数据. ---<Java编程思想> 其实注解可以理解为一个工具类,只要使用了这个工 ...