<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>

  context.shadowOffsetX = 5.0;  context.shadowOffsetY = 5.0;  context.shadowColor = "rgba(50%,50%,50%,0.75)";  context.shadowBlur = 10.0;

 // 起始位置截至位置  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);

  // 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);

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