HTML5 Canvas笔记——HTML5 Canvas绘图

参考书目：《HTML5 Canvas核心技术 图形、动画与游戏开发》

<!DOCTYPE html>

<html>

  <head>

    <title>2-4</title>

      <style>

        body {

            background: #dddddd;

        }

        #canvas {

            position: absolute;

            left: 0px;

            top: 0px;

            margin: 20px;

            background: #ffffff;

            border: thin solid #aaaaaa;

        }

      </style>

  </head>

  <body>

    <canvas id='canvas' width='1000' height='1000'>

      Canvas not supported

    </canvas>

    <script src='2-4.js'></script>

  </body>

</html>

2-4.js

var canvas=document.getElementById('canvas'),

    context=canvas.getContext('2d'),

    gradient=context.createRadialGradient(canvas.width/2,canvas.height,10,canvas.width/2,0,100);

gradient.addColorStop(0,'blue');

gradient.addColorStop(0.25,'white');

gradient.addColorStop(0.5,'purple');

gradient.addColorStop(0.75,'red');

gradient.addColorStop(1,'yellow');

context.fillStyle=gradient;

context.rect(0,0,canvas.width,canvas.height);

context.fill();

效果如图所示：

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容