HTML5代码学习（4）画布和SVG-职坐标

HTML5代码学习（4）画布和SVG

沉沙 2018-11-06 来源：阅读 1111 评论 0

摘要：本篇教程探讨了HTML5代码学习（4）画布和SVG，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML5代码学习（4）画布和SVG，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

<!DOCTYPE html>
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
    <body>
        
        <canvas width="1000" height="600">
            alternative content for browsers without canvas support
        </canvas>
        <script type="text/javascript">
            var canvas = document.querySelector("canvas");
            var context = canvas.getContext('2d');
            context.fillStyle = 'red';
            context.fillRect(0, 0, 800, 600);
            context.fillStyle = 'rgba(255,255,0,0.5)';
            context.fillRect(400, 200, 600, 400);

            //画一个折线
            context.moveTo(10, 10);
            context.lineTo(150, 50);
            context.lineTo(10, 50);
            context.stroke();

            //画一个黄色的球
            context.fillStyle = "yellow";
            context.beginPath();
            context.arc(70, 18, 15, 0, Math.PI * 2, true);
            context.closePath();
            context.fill();

            //绘制渐变条效果
            var grd = context.createLinearGradient(100, 100, 175, 50);
            grd.addColorStop(0, "#FF0000");
            grd.addColorStop(1, "#00FF00");
            context.fillStyle = grd;
            context.fillRect(100, 100, 175, 50);


        </script>

        <svg xmlns="//www.w3.org/2000/svg" version="1.1" height="190">
            <polygon points="100,10 40,180 190,60 10,60 160,180"
                style="fill: lime; stroke: purple; stroke-width: 5; fill-rule: evenodd;" />
        </svg>
    </body>
</html>