Canvas教程(1)——HTML5简介

Read more   2016/7/11

Canvas教程(2)——开始前的准备

Read more   2016/7/11

Canvas教程(3)——从线段开始

怎么画线段?

上一讲我们已经得到了咱们的画布和画笔,在发挥艺术家之魂前,还是要像小孩牙牙学语一样,我们也得从画一条线段开始。因为画线段是最简单的,最基础的。但是别小看了它。下面是我从度娘那里找到的一个由线条组成的图像。

线条组成的图像

是不是很有魔性?

Read more   2016/7/11

Canvas教程(4)——多线条组成图形

绘制折线

上一节中,我们已经成功绘制了一条线段。那么,如果我要绘制有两个笔画甚至是很多笔画的折线怎么办呢?

聪明的小伙伴肯定已经想到了,这还不简单,复用lineTo()就可以了。下面我就献丑随便画了一条优美的折线~

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>绘制折线</title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
        你的浏览器居然不支持Canvas?!赶快换一个吧!!
    </canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        context.moveTo(100,100);
        context.lineTo(300,300);
        context.lineTo(100,500);
        context.lineWidth = 5;
        context.strokeStyle = "#AA394C";
        context.stroke();
    }
</script>
</body>
</html>
Read more   2016/7/11

Canvas教程(5)——绘制矩形

Read more   2016/7/11