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(); }