JavaScript学习笔记二十八:Canvas
来源:互联网 发布:在哪里买域名比较好 编辑:程序博客网 时间:2024/06/05 03:56
JavaScript教程传送门
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等。
一个Canvas定义了一个指定尺寸的矩形框,在这个范围内我们可以随意绘制:
<canvas id="test-canvas" width="300" height="200"></canvas>// CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');// Canvas中绘制3D图形var gl = canvas.getContext("webgl");
绘制形状
Canvas的坐标以左上角为原点,水平向右为X轴,垂直向下为Y轴,以像素为单位,所以每个点都是非负整数。
例子:
'use strict';var canvas = document.getElementById('test-shape-canvas'), ctx = canvas.getContext('2d');ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小为200x200的矩形,擦除的意思是把该区域变为透明ctx.fillStyle = '#dddddd'; // 设置颜色ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色// 利用Path绘制复杂路径:var path=new Path2D();path.arc(75, 75, 50, 0, Math.PI*2, true);path.moveTo(110,75);path.arc(75, 75, 35, 0, Math.PI, false);path.moveTo(65, 65);path.arc(60, 65, 5, 0, Math.PI*2, true);path.moveTo(95, 65);path.arc(90, 65, 5, 0, Math.PI*2, true);ctx.strokeStyle = '#0000ff';ctx.stroke(path);
绘制文本
'use strict';var canvas = document.getElementById('test-text-canvas'), ctx = canvas.getContext('2d');ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.shadowOffsetX = 2;ctx.shadowOffsetY = 2;ctx.shadowBlur = 2;ctx.shadowColor = '#666666';ctx.font = '24px Arial';ctx.fillStyle = '#333333';ctx.fillText('带阴影的文字', 20, 40);
0 0
- JavaScript学习笔记二十八:Canvas
- JavaScript学习笔记(二十八) 链式模式
- 学习笔记(二十八)
- javaScript笔记(二十八) JSON
- JavaScript学习笔记(十八) 配置对象
- JavaScript学习笔记十八:标准对象-Date
- Linux实践工程师学习笔记二十八
- symbian学习笔记汇总【二十八篇】
- 软件工程视频学习笔记(二十八)
- JAVA学习笔记(二十八)
- Linux学习笔记二十八Network_hw
- python 学习笔记(二十八)
- tensorflow学习笔记(二十八):collection
- java学习笔记(二十八)异常
- 信息安全工程师 学习笔记(二十八)
- JavaScript for Kids 学习笔记12. Canvas
- java swing学习笔记二(画布Canvas)
- canvas游戏学习笔记(二)
- 【Codeforces】-599B-Spongebob and Joke(思维)
- 关于NiftyDialogEffects Dialog弹出动画第二次进入弹出dialog闪退Bug
- 【POI 12】【Double-row】
- UML类图
- 越狱检测/越狱检测绕过
- JavaScript学习笔记二十八:Canvas
- 菜鸟初学python 装饰器
- Java map遍历
- Android OkHttp
- java重写和重载
- Matlab与C/C++混合编程接口及应用
- 机器学习经典书籍
- windows内网渗透的一些笔记
- 手把手教你一小时学会搭建网站