记录12 canvas元素

可以将 canvas元素当作是一块空白的画布或者一页纸。可以将任何想要的内容(例如,直线、形状和文本)绘制于其上。唯一的限制就是你自己的想象力。

创建一个基本的画布并绘制简单的填充图形---长方形

如下用canvas创建一个画布，并在画布上(0,0)处画一个weight为20，height为100的长方形（20像素*100像素）。
绘制环境是一个 JavaScript对象, 包含了用于在画布上绘制的所有的方法和属性。要获得该对象, 在 canvas 上调用getContext,并且将字符串 "2d" 作为参数传递给它。该参数表示,我们要在画布上绘制一个二维图像。我们把这个绘制环境对象保存到变量 ctx 中。

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillRect(0,0,10,20);
    </script>
</body>

在画布上绘制多个填充图形---正方形

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        for(var i=0;i<8;i++){
            ctx.fillRect(i*10,i*10,10,10);
        }
    </script>
</body>

更改绘制的填充色

前面我们在绘制环境ctx下调用fillRect绘制图形默认都是黑色，我们可以更改绘制环境ctx的fillStyle更改填充色。

绘制出来的两个长方形都是红色的

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "Red";
        ctx.fillRect(0,0,10,20);
        ctx.fillRect(30,30,10,20);
    </script>
</body>

其他颜色名称可以查找https://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/这个网站

绘制边框

fillRect 方法绘制了一个填充的矩形，只是绘制一个矩形的边框,可以使用strokeRect 方法。可以看到边框默认灰色，因为fillStyle修改的只是填充色为红色，边框的颜色不是该属性进行控制的。

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "Red";
        ctx.fillRect(0,0,10,20);
        ctx.strokeRect(30,30,10,20);
    </script>
</body>

使用strokeStyle修改边框色为深粉，用lineWidth设置边框的粗细。如下画出一个粉色长方形边框，边框粗为4个像素。

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle = "DeepPink";
        ctx.lineWidth = 4;
        ctx.strokeRect(10,10,100,20);
    </script>
</body>

绘制路径（画布上的线条也叫路径）

如下，我们绘制两个线条为一个红色的x形

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle = "Red";
        ctx.lineWidth=4;
        ctx.beginPath();   //开始绘制线条
        ctx.moveTo(10,10);  //第一个线条的起点
        ctx.lineTo(60,60);  //第一个线条的终点
        ctx.moveTo(60,10);  //第二个线条的起点
        ctx.lineTo(10,60);  //第二个线条的终点
        ctx.stroke();   //根据上面的点绘制出两个线条，没有调用该函数页面不会有线条
    </script>
</body>

效果图如下：

Paste_Image.png

红蓝线条的绘制，如下绘制每一种颜色的线条都需要一对ctx.beginPath();和ctx.stroke();作为开始和结束。

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle = "Red";
        ctx.lineWidth=4;
        ctx.beginPath();   //开始绘制线条
        ctx.moveTo(10,10);  //第一个线条的起点
        ctx.lineTo(60,60);  //第一个线条的终点
        ctx.stroke();   //绘制结束

        ctx.strokeStyle = "Blue";
        ctx.beginPath();  //开始绘制线条
        ctx.moveTo(60,10);  //第二个线条的起点
        ctx.lineTo(10,60);  //第二个线条的终点
        ctx.stroke();   //绘制结束
    </script>
</body>

效果图如下：

Paste_Image.png

填充路径

我们可以绘制出一个子弹头的路径，还可以填充该封闭路径形成的图案---就是用前面使用过的设置绘制环境的填充色。

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth=4;
        ctx.strokeStyle = "Brown";
        ctx.fillStyle = "SkyBlue"
        ctx.beginPath();   //开始绘制路径
        ctx.moveTo(100,100);  //第一个线条的起点
        ctx.lineTo(100,60);  //第一个线条的第2个点
        ctx.lineTo(130,30);  //第一个线条的第3个点
        ctx.lineTo(160,60);  //第一个线条的第4个点
        ctx.lineTo(160,100);  //第一个线条的第5个点
        ctx.lineTo(100,100);  //第一个线条的第6个点
        ctx.stroke();   //绘制结束
        ctx.fill();
    </script>
</body>

效果图如下：

Paste_Image.png

如果路径不是一个封闭图形，使用填充色进行填充则会把第一个点和最后一个点当成封闭图形的最后一条路径进行填充，如下：

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth=4;
        ctx.strokeStyle = "Brown";
        ctx.fillStyle = "SkyBlue"
        ctx.beginPath();   //开始绘制路径
        ctx.moveTo(100,100);  //第一个线条的起点
        ctx.lineTo(100,60);  //第一个线条的第2个点
        ctx.lineTo(130,30);  //第一个线条的第3个点
        ctx.lineTo(160,60);  //第一个线条的第4个点
        // ctx.lineTo(160,100);  //第一个线条的第5个点
        // ctx.lineTo(100,100);  //第一个线条的第6个点
        ctx.stroke();   //绘制结束
        ctx.fill();
    </script>
</body>

效果图如下：

Paste_Image.png

绘制圆弧和圆

使用arc方法绘制圆弧和圆，第6个参数为false表示顺时针开始绘制，为true表示逆时针开始绘制。
用例子来讲解就是ctx.arc(50,50,20,0,Math.PI/2,false);就是以圆心（50，50），半径为20的圆，起始角度为0（默认从最右侧开始为起始角度0），顺时针绘制到结束角度Math.PI/2。

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth=4;
        ctx.strokeStyle = "Brown";
        
        ctx.beginPath();   //开始绘制路径
        ctx.arc(50,50,20,0,Math.PI/2,false);
        ctx.stroke();

        ctx.beginPath(); 
        ctx.arc(100,50,20,0,Math.PI,false);
        ctx.stroke();

        ctx.beginPath(); 
        ctx.arc(150,50,20,0,Math.PI*2,false);
        ctx.stroke();   //绘制结束
    </script>
</body>

效果图如下：

Paste_Image.png

我们每个圆弧都要一对ctx.beginPath();和ctx.stroke();作为开始和结束

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth=4;
        ctx.strokeStyle = "Brown";

        ctx.beginPath();   //开始绘制路径
        ctx.arc(50,50,20,0,Math.PI/2,false);
        ctx.arc(100,50,20,0,Math.PI,false);
        ctx.arc(150,50,20,0,Math.PI*2,false);
        ctx.stroke();   //绘制结束
    </script>
</body>

否则效果图如下,第一个图形的终点A会去链接第二个图形的起点B（然后从起点B开始绘制圆弧），第二个图形的终点又会去连接第三个图形的起点C（绘制圆弧时是从圆最右侧的点为起点顺时针开始画）：

Paste_Image.png

注意：逆时针绘制圆弧，起始角度为0逆时针绘制到结束角度Math.PI/2，刚好是3/4个圆，与顺时针相反。（因为起始角度是以顺时针来计算的，所以逆时针要画到那个位置就得绕3/4个圆）

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth=4;
        ctx.strokeStyle = "Brown";
        
        ctx.beginPath();   //开始绘制路径
        ctx.arc(50,50,20,0,Math.PI/2,true);
        ctx.stroke();

    </script>
</body>

效果图如下

用函数绘制多个圆

如果只是想要绘制完整的圆，arc 方法有点复杂。一来是顺时针还是逆时针无关紧要。二来在调用arc 方法之前和之后，总是需要调用ctx. beginPath 和 ctx.stroke 方法太麻烦。我们可以编写一个函数来绘制圆，从而忽略这些细节，所必需提供的只有 x、y 和 radius 参数（圆心坐标和半径---圆的大小）。

1，绘制函数如getContext只能在画布环境也就是<canvas>标签里面有效，所以我们创建一个600*600的画布，超出画布的部分不会显示出来。
2，在画布里面点击任意地方，会以点击的点为圆心绘制一个随机颜色和随机半径的圆。

<!DOCTYPE html>
<html>
<head>
    <title>Learn</title>
</head>
<body>
    <canvas id="canvas" width="600" height="600"></canvas>>
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth = 4;
        var colors = ["Red","Orange","Yellow","Green","Blue","Purple"];
        var radius = ["10","20","30","40","50","60"];
        var circle = function (x,y,radius){
            ctx.beginPath();
            ctx.arc(x,y,radius,0,Math.PI*2,false);
            ctx.stroke();
        };
        var clickHandler=function(event){
            ctx.strokeStyle=colors[Math.floor(Math.random()*6)];
            circle(event.pageX,event.pageY,radius[Math.floor(Math.random()*6)])
        }
        $("#canvas").click(clickHandler);
    </script>
</body>
</html>

效果图如下：

Paste_Image.png

最后编辑于：2017.12.05 05:47:36

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,254评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,875评论 3赞 387
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,682评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,896评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,015评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,152评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,208评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,962评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,388评论 1赞 304
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,700评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,867评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,551评论 4赞 335
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,186评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,901评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,142评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,689评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,757评论 2赞 351

记录12 canvas元素

创建一个基本的画布并绘制简单的填充图形---长方形

更改绘制的填充色

绘制边框

绘制路径（画布上的线条也叫路径）

填充路径

绘制圆弧和圆

用函数绘制多个圆

推荐阅读更多精彩内容