HTML5之Canvas画布

时间:2023-02-03 07:06:14

先上代码:

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