复杂的内容都是有简单的线条结合而成的，想要绘制出复杂好看的内容先从画直线开始

canvas绘制直线先认识几个函数

beginPath()；开始一条路径，或重置当前的路径

moveTo(x,y)；用于规定直线的起点坐标

lineTo(x,y)；用于规定直线的终点坐标

closePath()；方法创建从当前点到开始点的路径

stroke()；方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色

利用上面的函数就可以简单的画出直线了

代码

<canvas id="canvas" style="border: 1px solid #000;">当前浏览器不支持canvas，请更换浏览器再试</canvas>

<script type="text/javascript">

    window.onload = function() {

        var canvas = document.getElementById("canvas");

    　　 canvas.width = 1024;//设置canvas宽高

    　　 canvas.height = 768;

    　　 var context = canvas.getContext("2d");

        context.beginPath();

    　　 context.moveTo(100, 100);

    　　 context.lineTo(700, 700);

        context.closePath();

        context.stroke();

    }

</script>

接下来个直线添加点样式：

lineWidth；属性设置或返回当前线条的宽度，以像素计

strokeStyle；属性设置或返回用于笔触的颜色、渐变或模式

fillStyle；属性设置或返回用于填充绘画的颜色、渐变或模式

fill()；方法填充当前的图像（路径）。默认颜色是黑色

JavaScript代码如下：

<canvas id="canvas" style="border: 1px solid #000;">当前浏览器不支持canvas，请更换浏览器再试</canvas>

<script type="text/javascript">

    window.onload = function() {

        var canvas = document.getElementById("canvas");

    　　canvas.width = 1024;//设置canvas宽高

    　　canvas.height = 768;

    　　var context = canvas.getContext("2d");

        context.beginPath();

    　　context.moveTo(100, 100);

    　　context.lineTo(700, 700);

        context.closePath();
　　　　 context.lineWidth = 5;
　　　　context.strokeStyle = "red";

        context.stroke();

    }

</script>

会绘制直线后我们接着来绘制一些图像，要绘制图像也是使用lineTo(x,y)，绘制三角形，代码如下

<canvas id="canvas" style="border: 1px solid #000;">当前浏览器不支持canvas，请更换浏览器再试</canvas>

<script type="text/javascript">

    window.onload = function() {

        var canvas = document.getElementById("canvas");

    　　 canvas.width = 1024;//设置canvas宽高

    　　 canvas.height = 768;

    　　 var context = canvas.getContext("2d");

         context.beginPath();

    　　 context.moveTo(100, 100);

    　　 context.lineTo(700, 700);

　　　　  context.lineTo(100, 700);

　　　　  context.lineTo(100, 100);

         context.closePath();

         context.lineWidth = 5;

　　　　　 context.strokeStyle = "red";

         context.stroke();

    }

</script>

这个时候在是实现一些复杂的图像，七巧板：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>canvas绘制七巧板</title>

    </head>

    <body>

        <canvas id="canvas" style="border: 1px solid #aa;display: block;margin: 50px auto;">

            当前浏览器不支持Canvas，请更换浏览器再试

        </canvas>

        <script type="text/javascript">

            var tangram = [

                    {p: [{x: 0,y: 0}, {x: 800,y: 0}, {x: 400,y: 400}],color: "#caff76"},

                    {p: [{x: 0,y: 0}, {x: 400,y: 400}, {x: 0,y: 800}],color: "#67becf"},

                    {p: [{x: 800,y: 0}, {x: 800,y: 400}, {x: 600,y: 600}, {x: 600,y: 200}],color: "#ef3d61"},

                    {p: [{x: 600,y: 200}, {x: 600,y: 600}, {x: 400,y: 400}],color: "#f9f51a"},

                    {p: [{x: 400,y: 400}, {x: 600,y: 600}, {x: 400,y: 800}, {x: 200,y: 600}],color: "#a594c0"},

                    {p: [{x: 200,y: 600}, {x: 400,y: 800}, {x: 0,y: 800}],color: "#fa8ecc"},

                    {p: [{x: 800,y: 400}, {x: 800,y: 800}, {x: 400,y: 800}],color: "#f6ca29"},

            ];

            window.onload = function() {

                var canvas = document.getElementById("canvas");

                canvas.width = 800;

                canvas.height = 800;

                var context = canvas.getContext("2d");

                for(var i = 0; i < tangram.length; i++) {

                    draw(tangram[i], context)

                }

            }

            function draw(plece, cxt) {

                cxt.beginPath();

                cxt.moveTo(plece.p[0].x, plece.p[0].y);

                for(var i = 1; i < plece.p.length; i++) {

                    cxt.lineTo(plece.p[i].x, plece.p[i].y);

                }

                cxt.closePath();

                cxt.fillStyle = plece.color;

                cxt.fill();

                cxt.strokeStyle = "black";

                cxt.lineWidth = 3;

                cxt.stroke();

            }

        </script>

    </body>

</html>

canvas基础入门（二）绘制线条、三角形、七巧板的更多相关文章

  1. Swift语法基础入门二(数组, 字典, 字符串)

    Swift语法基础入门二(数组, 字典, 字符串) 数组(有序数据的集) *格式 : [] / Int / Array() let 不可变数组 var 可变数组 注意: 不需要改变集合的时候创建不可变 ...

  2. C#基础入门 二

    C#基础入门 二 循环语句 与C语言中用法相同. continue:结束本次循环(continue)后面的代码不再执行,进入下次循环(通常与if连用). 数组 一维数组定义:int[] intArra ...

  3. HTML5 Canvas——基础入门

    认识canvas html5的新标签 <canvas>标签只是图像容器,必须使用js来绘制图形 可以通过多种方法使用canvas绘制路径,盒,圆,字符以及添加图像 canvas画布 < ...

  4. JAVA之Mybatis基础入门二 -- 新增、更新、删除

    上一节说了Mybatis的框架搭建和简单查询,这次我们来说一说用Mybatis进行基本的增删改操作: 一. 插入一条数据 1.首先编写USER.XML(表的xml)使用insert元素,元素写在map ...

  5. canvas基础入门（一）canvas的width、height于css样式中的宽高区别

    canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...

  6. C#学习笔记---基础入门(二)

    枚举 枚举是被命名的整型常数的集合:枚举类型的变量只有赋值后才能使用:不同枚举中的枚举值可以重名:可以自定义枚举值. enum Playstates {            跑, 跳,下滑,左转,右 ...

  7. Linux 基础入门二

    1.远程连接  ssh协议:secure shell  ~]# ss -tnl 查看系统是否监听在tcp协议的22号接口:  ~]# ip addr list 或者 ifconfig 查看ip地址 确 ...

  8. Mybatis框架基础入门(二)--架构简介

    mybatis配置 SqlMapConfig.xml,此文件作为mybatis的全局配置文件,配置了mybatis的运行环境等信息. mapper.xml文件即sql映射文件,文件中配置了操作数据库的 ...

  9. canvas基础学习（一）

    一.概述 canvas它和其它的HTML5标签的使用基本一致,但是它相当于在浏览器中建立一个画布,可以再这个画布上画图.创建动画甚至是3D游戏.由于canvas要适配不同终端的分辨率,所以尽可能的在标 ...

随机推荐

  1. 项目一:第十一天 2、运单waybill快速录入 3、权限demo演示-了解 5、权限模块数据模型 6、基于shiro实现用户认证-登录（重点）

    1. easyui DataGrid行编辑功能 2. 运单waybill快速录入 3. 权限demo演示-了解 4. Apache shiro安全框架概述 5. 权限模块数据模型 6. 基于shiro ...

  2. Luogu 4137 Rmq Problem / mex

    一个主席树题. 一开始想着直接动态开点硬搞就可以了,每次查询只要作一个类似于前缀和的东西看看区间有没有满,在主席树上二分就可以了. 但是这样是错的,因为一个权值会出现很多次……然后就错了. 所以我们考 ...

  3. 10.model/view实例（2）

    任务:显示一个2x3的表格,将表格中的数据显示如下: 思考: 1.如何显示数据和上个例子一样. 2.但是每个单元格的数据都是有角色划分的. Qt::ItemDataRole 3.View从Model中 ...

  4. Git 之 协同开发

    GitHub中多人协同开发和单人开发还是有点差别,协同开发一般有两种方式: 合作者,将其他用户添加到仓库合作者中之后,该用户就具有向当前仓库提交代码. 组织,创建一个组织,然后再该组织下可以创建多个项 ...

  5. git clone Timed out 解决

    因为不可抗拒的原因,在乌鲁木齐从 github 上面克隆项目时,会超时克隆不了. 使用 https 方式报错: $ git clone https://github.com/xxx.git Cloni ...

  6. Integer类的parseInt和valueOf的区别

    我们平时应该都用过或者见过parseInt和valueOf这两个方法.一般我们是想把String类型的字符数字转成int类型.从这个功能层面来说,这两个方法都一样,都可以胜任这个功能. 但是,我们进入 ...

  7. Loading Large Bitmaps Efficiently

    有效地加载大位图文件-Loading Large Bitmaps Efficiently 图像有各种不同的形状和大小.在许多情况下,他们往往比一个典型应用程序的用户界面(UI)所需要的资源更大.例如, ...

  8. Android之九宫格解锁的实现

        <ignore_js_op>                                                  下面是最重要的那个LocusPassWordView ...

  9. Linux中的sed解析

    简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的 ...

  10. web 后台打印

    //提交打印 function sbumitPrint() { printHidden("AppsDSPrintDoub.aspx?type=print"); } function ...