html5学习笔记之四(canvas对象)
来源:互联网 发布:bat执行mysql语句 编辑:程序博客网 时间:2024/06/06 12:22
看视频,做笔记:
1.例子:
<script>
var canvas = document.querySelector("canvas");
var context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fileRect(0,0,800,600);
context.fillStyle = 'rgba(255,255,0,0.5)';
context.fillRect(400,200,800,600);
</script>
2.填充矩形区域
context.fillRect(x,y,w,h); //填充矩形区域,设置参数
context.strokeRect(x,y,w,h); //矩形区域边界绘制
context.clearRect(x,y,w,h); //橡皮擦,将矩形区域内内容擦除
3.颜色指定方式(红色为例)
#FF0000、#F00、rgb(255,0,0)、rgb(100%,0%,0%)、rgba(255,0,0, 1.0)、rgba(100%,0%,0%, 1.0)、hsl(0,100%,50%)、hsla(0,100%,50%, 1.0) 、red等等。
4.阴影效果
context.shadowOffsetX = 2.0;
context.shadowOffsetY = 2.0;
context.shadowColor = "rgba(50%,50%,50%,0.75)"; //阴影颜色
context.shadowBlur = 2.0; //模糊程度
5.填充效果
渐变色效果又分为线性渐变、中心区域渐变。
线性渐变:
var linGrad = context.createLinearGradient(0,450,1000,450); // 起始位置到截止位置
linGrad.addColorStop(0.0,'red'); //渐变中节点
linGrad.addColorStop(0.5,'yellow');
linGrad.addColorStop(0.75,'orange');
linGrad.addColorStop(1.0,'purple');
context.fillStyle = linGrad; //应用到图形上
context.fillRect(0,450,1000,450);
中心区域渐变:
var radGrad = context.createRadialGradient(260,320,40,200,400,200); //定义渐变区域(x0,y0,r0,x1,y1,r1)
radGrad.addColorStop(0.0,'yellow'); //定义节点
radGrad.addColorStop(0.9,'orange');
randGrad.addColorStop(1.0,'rgba(0,0,0,0)');
context.fillStyle = radGrad; // 定义填充对象
context.fillRect(0,200,400,400);
6.手绘
context.beginPath();
context.moveTo(300,700);
context.lineTo(600,100);
context.lineTo(900,700);
context.moveTo(350,400);
context.lineTo(850,400);
context.stroke();
绘制过程:开始绘制beginPath() --->定义所有节点---> 用stroke实现绘制。
绘制抛物线:context.quadraticCurveTo(cpx,cpy,x,y)
贝塞尔曲线:context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
自定义曲线:context.arcTo(x1,y1,x2,y2,radius)
以弧度坐标标定义弧:context.arc(x,y,radius,startAngle,endangle,anticlockwise)
视频来源:http://v.youku.com/v_show/id_XMzc4OTI3NTc2.html
- html5学习笔记之四(canvas对象)
- HTML5学习笔记之canvas
- HTML5学习笔记之canvas绘制圆形
- HTML5之帆布(canvas)(四)
- html5 canvas 学习笔记
- html5学习笔记 -- canvas
- HTML5学习笔记------Canvas
- html5 canvas 学习笔记
- HTML5学习(四)---Canvas绘图
- HTML5学习之-Canvas
- html5 学习之路 二(canvas)
- HTML5的学习之Canvas(二)
- HTML5学习笔记(四)
- html5学习笔记(四)
- HTML5 Canvas知识点学习笔记
- HTML5学习笔记-canvas 标签
- HTML5----Canvas 学习笔记一
- 【HTML5学习笔记】画布Canvas
- slackware下ibus编译安装(更新:2010/10/17)
- 第十六周 任务三
- 第十六州实验报告3.0
- 2012年 上半年 第十四周 C++程序设计 (四十一)
- P83Demo3.13 ORG $+5
- html5学习笔记之四(canvas对象)
- 【Linux】Linux 统计代码行数
- 框架与设计模式
- 最近做的项目截图
- 快实习了,即将走上程序员生涯,于是开通了CSDN博客
- 备份python写简单socket编程的步骤
- MySQL中获取最后插入的自增ID值 LAST_INSERT_ID
- 2012年 上半年 第十四周 C++程序设计 (四十二)
- 简单工厂VS工厂方法