GitHub 博客园 Nanakon

【canvas】伸缩 / 剪裁 / 文本 / 阴影 / 填充图案 / 填充渐变 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {margin: 0;padding: 0}
        canvas {border: 2px dotted #ddd}
    </style>
</head>
<body>
    <canvas id=drawingCanvas width=500 height=300></canvas>
    <script>
        var canvas = document.getElementById('drawingCanvas')
        var context = canvas.getContext('2d')
        
        var img = new Image()
        img.onload = function() {
            // 伸缩
            //context.drawImage(img, 0, 0, 150, 112.5)
            // 阴影
            //context.shadowOffsetX = 20
            //context.shadowOffsetY = 20
            //context.shadowColor = 'black'
            //context.shadowBlur = 5
            // 裁剪
            context.drawImage(img, 0, 0, 50, 25, 0, 0, 50, 25)
            // 填充图案
            var pattern = context.createPattern(img, 'repeat')
            context.fillStyle = pattern
            context.rect(100, 100, 400, 200)
            context.fill()
            // 填充渐变
            var gradient = context.createLinearGradient(0, 0, 100, 100)
            gradient.addColorStop(0, 'rgba(0,0,0,0.5)')
            gradient.addColorStop(1, 'rgba(255,255,255,0.5)')
            context.rect(0, 0, 100, 100)
            context.fillStyle = gradient
            context.fill()
        }
        img.src = 'http://tp2.sinaimg.cn/1416973497/50/5655097303/0'
        
        // 绘制文本
        context.font = 'bold 20px arial'
        context.textBaseline = 'top'
        context.fillStyle = 'black'
        context.fillText('hello', 400, 10)

        context.font = 'bold 40px arial'
        context.lineWidth = '1'
        context.strokeStyle = 'red'
        context.strokeText('wolrd', 0, 200)
    </script>
</body>
</html>

 

posted on 2013-12-04 00:38  jzm17173  阅读(343)  评论(0)    收藏  举报

导航

轻音