Canvas基础应用

作者: IT小C | 来源:发表于2016-03-28 12:22 被阅读34次

H5 新特性01
Canvas基础应用
8个前端知识点：HTML5(canvas应用)
HTML5中canvas使用
开发Canvas 绘画应用（二）：实现绘画
【Canvas】笔记（一）基础知识
第十一周第三天笔记之canvas知识
html5 Canvas画图5：曲线之arc
Android自定义控件
Canvas和Path的基础用法

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <canvas id="trails" width="200" height="200" style="border:1px solid;">
            对不起，您的浏览器不支持canvas
        </canvas>
    </body>
    <script>
        var canvas = document.getElementById('trails');
        var context = canvas.getContext('2d');

        context.save();

        //变换
        context.translate(10,10);

        context.beginPath();
        context.moveTo(30,30);
        context.lineTo(90,90);
        context.lineTo(40,90);

        //线条宽度
        context.lineWidth = 5;
        //接合点样式
        context.lineJoin = 'round';
        //颜色
        context.strokeStyle = '#663300';
        //线条末端样式
        context.lineCap = 'round';

        //闭合路径
        context.closePath();

        //填充
        context.fillStyle = '#339900';
        context.fill();

        context.fillStyle = '#CCC';
        //填充矩形区域
        context.fillRect(0,0,10,50);
        //画出矩形区域边框
        context.strokeRect(0,100,10,50);
        //清楚矩形区域内容
        context.clearRect(0,0,10,50);

        //绘制曲线
        context.moveTo(0,0);
        context.quadraticCurveTo(10,110,100,120);

        //插入图片
        var pic = new Image();
        pic.src = 'img/blue1.png';
        pic.onload = function(){
        context.drawImage(pic,0,0,40,40);
        }

        //背景图片
        var gr = new Image();
        gr.src='img/mapbg.jpg';
        gr.onload = function(){
        context.strokeStyle = context.createPattern(gr,'repeat');
        context.fillRect(100,100,100,50);
        }


        //渐变
        //var tG = context.createLinearGradient(100,10,50,50);
        //放射性渐变
        var tG = context.createRadialGradient(100,10,50,50,50,50);
        tG.addColorStop(0,'rgba(0,0,0,0.1)');
        tG.addColorStop(0.5,'#00ff00');
        tG.addColorStop(1,'#0000ff');
        context.fillStyle = tG;
        context.fillRect(100,10,50,50);

        //缩放
        context.scale(2,2);

        context.stroke();

        //恢复context至原始状态，后续绘图不会受前面设置的属性影响
        context.restore();

        //文本
        context.save();
        //字号
        context.font = '60px impact';
        //对齐方式
        context.textAlign = 'center';

        //阴影
        context.shadowColor = 'rgba(0,0,0,0.2)';
        context.shadowOffsetX = 15;
        context.shadowOffsetY = -10;
        context.shadowBlur = 2;

        //缩放
        context.scale(1,0.6);
        //拉伸变换
        context.transform(1,0,-0.5,1,0,0);

        //文本填充色
        context.fillStyle = '#996600';
        context.fillText('Hello World!' ,100,100,100);

        context.restore();
    </script>
</html>