HTML5之Canvas画布
先上代码:
<canvas width="1000" height="800">浏览器不支持HTML5!</canvas>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
var context = canvas.getContext('2d'); // 设置阴影
context.shadowOffsetX = 5.0;
context.shadowOffsetY = 5.0;
context.shadowColor = "rgba(50%,50%,50%,0.75)";
context.shadowBlur = 10.0; // 画一个矩形图形
context.fillStyle = 'red';
context.fillRect(2, 2, 300, 200); // 加边框
context.strokeRect(0, 0, 304, 204); // 画一个矩形
context.fillStyle = 'rgba(255,255,0,0.5)';
context.fillRect(250, 150, 300, 200); // 清除指定区域
context.clearRect(350, 200, 100, 100);
</script>
- Rectangles 绘制矩形对象
- context.fillRect(x,y,w,h) // 绘制矩形
- context.strokeRect(x,y,w,h) // 绘制边框
- context.clearRect(x,y,w,h) // 清除指定区域
- Colors 设置颜色
- 指定颜色(红色)
指定方法 颜色值
-----------------------------
Hexa(十六进制) #FF0000
Hexa(short) #F00
RGB rgb(255,0,0)
RGB(percent) rgb(100%,0%,0%)
RGBA rgb(255,0,0,0.7)
RGBA(percent) rgba(100%,0%,0%,0.7)
HSL hsl(0,100%,50%)
HSLA hsla(0,100%,50%,1.0)
SVG(颜色名字) red
- shadow 阴影
context.shadowOffsetX = 5.0;
context.shadowOffsetY = 5.0;
context.shadowColor = "rgba(50%,50%,50%,0.75)";
context.shadowBlur = 10.0;
- Gradients 渐变
- 1.线性渐变
// 起始位置截至位置
var linGrad = context.createLinearGradient(0,450,1000,450); // 渐变中节点
linGrad.addColorStop(0.0,'red');
linGrad.addColorStop(0.5,'yellow');
linGrad.addColorStop(0.7,'orange');
linGrad.addColorStop(1.0,'purple'); // 应用到图形上
context.fillStyle = linGrad;
context.fillRect(0,450,1000,450);
- 2. 中心区域渐变
// 6组数字,代表 2 个圆
var radGrad = context.createRadialGradient(260,320,40,200,400,200); radGrad.addColorStop(0.0, 'yellow');
radGrad.addColorStop(0.9, 'orange');
radGrad.addColorStop(1.0, 'rgba(0,0,0,0)'); context.fillStyle = radGrad;
context.fillRect(0, 200, 400, 400);
- Paths 绘制路径线条
- 绘制过程
1.开始绘制 beginPath()
2.定义所有节点
3.用stroke实现绘制
CreateLineA(); // 绘制一个 A 型
CreateQua(); // 绘制一条 抛物线
CreateBez(); // 绘制一条 贝塞尔曲线
CreateArc(); // 绘制一个 自定义曲线
CreateRoundedRect(); // 绘制一个 圆角图形
CreateRect(); // 绘制一个 矩形 // 绘制一个 A 型
function CreateLineA() {
context.fillStyle = 'red';
context.strokeRect(0, 0, 300, 300); // 绘制边框
// 1. 开始绘制beginPath()
context.beginPath(); // 2. 定义所有节点
context.moveTo(100, 200); // 将笔移动到该坐标
context.lineTo(150, 50); // 绘制到指定坐标
context.lineTo(200, 200); // 再接着绘制到另一个坐标 context.moveTo(100, 120); // 再将笔移动到别的区域
context.lineTo(200, 120); // 再绘制一条线 context.textAlign = 'left'; // 设置水平对齐
context.textBaseline = 'alphabetic'; // 设置垂直对齐
context.font = 'bold 16px sans-serif'; // 设置输出字体样式
context.fillText('(100/200)', 50, 220); // 在指定坐标输出文字
context.fillText('(150/50)', 115, 30);
context.fillText('(200/200)', 150, 220);
context.fillText('(100/120)', 40, 100);
context.fillText('(200/120)', 180, 100); // 3. 用stroke实现绘制
context.stroke();
} // 绘制一条抛物线
function CreateQua() {
context.strokeRect(320, 0, 300, 300); // 绘制边框 context.beginPath();
context.moveTo(350, 250);
context.quadraticCurveTo(400, 50, 600, 50);
context.stroke();
} // 绘制一条贝塞尔曲线
function CreateBez() {
context.strokeRect(640, 0, 300, 300); // 绘制边框 context.beginPath();
context.moveTo(670, 250);
context.bezierCurveTo(880, 300, 700, 30, 900, 50);
context.stroke();
} // 绘制一个 自定义曲线
function CreateArc() {
context.strokeRect(0, 320, 300, 300); // 绘制边框
context.beginPath();
context.moveTo(20, 430);
context.arcTo(20, 370, 270, 370, 60);
context.stroke();
} // 绘制一个 圆角图形
function CreateRoundedRect() {
context.strokeRect(320, 320, 300, 300); // 绘制边框 x = 340;
y = 370;
w = 250;
h = 200;
r = 60; context.beginPath();
context.moveTo(x, y + r);
context.arcTo(x, y, x + w, y, r);
context.arcTo(x + w, y, x + w, y + h, r);
context.arcTo(x + w, y + h, x, y + h, r);
context.arcTo(x, y + h, x, y, r);
context.closePath(); // 闭合曲线
context.stroke();
} // 绘制一个矩形对象
function CreateRect() {
context.strokeRect(640, 320, 300, 300); // 绘制边框 context.beginPath();
context.rect(660,340,250,250);
context.stroke();
}
HTML5之Canvas画布的更多相关文章
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 【HTML5】Canvas画布
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- 【HTML5】canvas画布练习
第一步:获取画布元素 var canvas = document.getElementById("myCanvas"); var context = canvas.getConte ...
- 自学HTML5第四节(canvas画布详解)
canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...
- html5中canvas的使用 获取鼠标点击页面上某点的RGB
1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...
- HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
- HTML5 之Canvas绘制太阳系
<!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...
- Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
- html5 之 canvas 相关知识(一)概念及定义
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
随机推荐
- SQLite 使用教程2 语法
http://www.runoob.com/sqlite/sqlite-syntax.html SQLite 语法 SQLite 是遵循一套独特的称为语法的规则和准则.本教程列出了所有基本的 SQLi ...
- win2008下c#调用directshow问题
打开摄像头时报错 网上查 说缺少qedit.dll,下载后注册也不行. 最后安装暴风影音,测试ok
- 从零开始学android开发-四大组件之一 Activity
1.Activity是Android四大组件(Application Components)之一,简单来说Activity就是平常所见到的用户界面,一般情况下,一个Activity所占的窗口是满屏的, ...
- 九、Socket之TCP编程
TCP简介 TCP是Transmission Control Protocol(传输控制协议)的简称,是TCP/IP体系中面向连接的运输层协议,在网络中提供全双工的和可靠的服务. TCP最主要的特点: ...
- 一个小例子讲讲jsonp
1.何为jsonp(json with padding) json我们都知道并用过.那么jsonp呢,呃,好像听过,但没用过.很久以来楼主也只是听过这个名词而已.直到今晚楼主看到一篇文章(http:/ ...
- 快递查询API接口对接方法
各类接口 快递查询API有即时查询和订阅查询两种,即时是请求即返回数据,订阅则是订阅快递单号到接口,有物流轨迹更新则全量返回数据.目前常用的有快递鸟.快递100.快递网等. 快递鸟即时API可以查询3 ...
- 如何真正免费运营推广APP应用
随着移动终端的迅速普及,各类APP如雨后春笋般涌现出来,但是真正的运营成功的产品却寥寥无几. 从瓜分渠道资源到抢占用户的过程中,很多同行都明显的感觉到,渠道平台所带来的量日益减少,但是刊例价格却一再攀 ...
- nginx性能配置参数说明:
nginx的配置:main配置段说明一.正常运行的必备配置: 1.user username [groupname]; 指定运行worker进程的用户和组 2.pid /path/to/pidfile ...
- Java队列实现
队列数组实现:队列长度有限,但是考虑到平时一般都使用有界队列,这应该也不算是个缺点 public class Queue { private Object[] objs; private int he ...
- 关于SpringAOP的XML方式的配置
AOP(XML)[理解][应用][重点] 1.AOP基础实例 A.导入jar包 核心包(4个) 日志(2个) AOP(4个) Spring进行AOP开发(1个) ...