Web速查-索引

定义

<canvas> 标签定义图形，比如图表和其他图像。

<canvas> 标签只是图形容器，必须使用脚本来绘制图形。

语法

<canvas> 标签是 HTML 5 中的新标签。

属性值

属性 值 描述
height pixels 设置 canvas 的高度。
width pixels 设置 canvas 的宽度。

实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>

</head>

<body>

    <canvas id="myCanvas" width="333" height="333"></canvas>

    <script type="text/javascript">

        //绘制伞帽

        function drawTop(ctx, fillStyle){

            ctx.fillStyle = fillStyle;

            ctx.beginPath();

            ctx.arc(0, 0, 30, 0,Math.PI,true);

            ctx.closePath();

            ctx.fill();

        }

        //绘制手柄

        function drawGrip(ctx){

            ctx.save();

            ctx.fillStyle = "cyan";//伞柄色

            ctx.fillRect(-1.5, 0, 1.5, 40);

            ctx.beginPath();



            ctx.strokeStyle="cyan";//伞柄下弧

            ctx.arc(2.5, 40, 4, Math.PI,0,true);

            ctx.stroke();

            ctx.closePath();

            ctx.restore();

        }

        //绘制

        function draw(){

            var ctx = document.getElementById('myCanvas').getContext("2d");

            //canvas,画布50，50坐标处

            ctx.translate(50,50);

            drawTop(ctx,"rgb(255,123,345)");

            drawGrip(ctx);

        }

    </script>

    <input type="button" value="开始绘制" onclick="draw()"/>

</body>

</html>

推荐阅读：番外 #Canvas# - 0000 - 砖心降伏Canvas

视频讲解