日期:2014-05-17  浏览次数:20750 次

千呼万唤 HTML 5 (11) - 画布(canvas)之效果

介绍
HTML 5:?画布(canvas)之效果

  • 填充色, 笔划色, 颜色值 | fillStyle, strokeStyle
  • 剪裁 | clip()
  • 渐变色 | createLinearGradient(), createRadialGradient(), CanvasGradient.addColorStop()
  • 贴图的平铺模式 | createPattern()
  • 阴影效果 | shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
  • 全局 Alpha | globalAlpha
  • 新颜色与画布当前已有颜色的合成方式 | globalCompositeOperation
  • 保存画布上下文,以及恢复画布上下文 | save(), restore()
  • 像素操作 | createImageData(), getImageData(), putImageData(), ImageData, CanvasPixelArray



示例
1、填充色, 笔划色, 颜色值 | fillStyle, strokeStyle
canvas/effect/color.html

<!DOCTYPE HTML>
<html>
<head>
    <title>填充色, 笔划色, 颜色值</title>
</head>
<body>
    <canvas id="canvas" width="260" height="140" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById(