HTML5_canvas 画布

<canvas></canvas> 画布

<canvas id="my_canvas" width="400" height="400">
    您的浏览器不支持 canvas，建议更换浏览器
</canvas>

用于在网页上绘制图形

canvas 是一个 inline-block 行内块元素

canvas 默认宽高：width: 300px; height: 150px;

canvas 不能使用 css 设置 width 和 height，会导致后面绘画发生变形

canvas 必须使用标签上的属性设置 width 和 height

基本使用

获取画布

var myCanvas = document.getElementById("my_canvas");

获取画笔（也叫“获取上下文”）
- ```
var painting = myCanvas.getContext("2d");
```

画矩形
- - 填充矩形
    - 看到这个 fill 一定和填充有关系
    - 看到这个 rect 一定是一个矩形
    - painting.fillRect(0, 0, 100, 100); // 或者
      padding.rect(0, 0, 100, 100);
      padding.fill();
    - 填充颜色
    - padding.fillStyle = "red";
      padding.fillStyle = "rgba(255, 255, 0, 0.4)";
  - 描边矩形
    - 看到这个 stroke 一定和描边有关系
    - painting.strokeRect(100, 100, 100, 100); // 或者
      padding.rect(100, 100, 100, 100);
      padding.stroke();
    - 设置线描边的颜色
      - padding.strikeStyle = "yellow";
    - 设置线的宽度
      - padding.lineWidth = 20;
        padding.lineWidth = "10";
      - 在原有盒子的基础上，描边会 里外均等分布
- 参数1，参数2
  - 矩形的左上角坐标
- 参数3，参数4
  - 矩形的 width 和 height

再开始绘制新图形（类似绘画的 "抬笔" 动作）
- ```
padding.beginPath();
```

橡皮擦

矩形橡皮擦

```
painting.clearRect(0, 0, 100, 100);
```

清除整个画布

padding.clearRect(0, 0, myCanvas.width, myCanvas.height);

画线段
画笔移动到画布起始点
- ```
painting.moveTo(100, 100);
```

设置画笔的终点

padding.lineTo(200, 100);
/**** 除了 .fillRect 和 .strokeRect
      其他绘制，都必须加 .fill(),或者 .stroke()
          才能看见图形
 ****/
painting.stroke();    // 线宽lineWidth 总是 线两侧均等分配

设置 线段两端 风格

painting.lineCap = "butt";    // 默认值，方形结束

painting.lineCap = "round";    // 圆形结束

painting.lineCap = "square";    // 方形结束，但是当？？？？？？？？？？？？？？

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>菜鸟教程(runoob.com)</title>

    </head>

    <body>

        <p>三种不同的结束线:</p>

        <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

            您的浏览器不支持 HTML5 canvas 标签。

        </canvas>

        <script>

            var c=document.getElementById("myCanvas");

            var ctx=c.getContext("2d");

            ctx.beginPath();

            ctx.lineWidth=10;

            ctx.lineCap="butt";

            ctx.moveTo(20,20);

            ctx.lineTo(200,20);

            ctx.stroke();

            ctx.beginPath();

            ctx.lineCap="round";

            ctx.moveTo(20,40);

            ctx.lineTo(200,40);

            ctx.stroke();

            ctx.beginPath();

            ctx.lineCap="square";

            ctx.moveTo(20,60);

            ctx.lineTo(200,60);

            ctx.stroke();

        </script>

    </body>

</html>

连续线段绘制

painting.moveTo(100, 100);    // 起点

painting.lineTo(100, 200);

painting.lineTo(200, 200);

// 线段连接处 样式设置

painting.lineJoin = "bevel";    // 斜角    默认值

painting.lineJoin = "round";    // 圆角

painting.lineJoin = "miter";    // 直角

// 手动 绘制三角形    不好，会在连接处缺一个角

painting.lineTo(100, 100);    // 手动连接 终点，起点，缺点： 会在连接处有一个缺角，且不会被 lineJoin() 设置样式

// 闭合路径 绘制三角形    一定要使用这个函数，来连接 终点，起点，且会所有角都会被 lineJoin() 设置到样式

painting.closePath();



painting.fill();    // 有填充

painting.stroke();    // 同时描边

注意：从获取画板开始，到最终 .stroke() 临摹，只要有一个错误，结果就不会显示。console 控制台并不会报错

pen.save() 和 pen.restore()
- 之间的样式被包裹，类似函数变量作用域

练习1.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="./css/index.css" />

        <script type="text/javascript" src="./js/kjfFunctions.js"></script>

        <script type="text/javascript" src="./js/index.js"></script>

        <style type="text/css">

            body {

                width: 100%;

                color: #000;

                background: #96b377;

                font: 14px Helvetica, Arial, sans-serif;

                text-align: center;

            }

        </style>

    </head>

    <body>

        <canvas id="my_canvas" width="600" height="600">

            您的浏览器不支持 canvas，建议更新或者更换浏览器。

        </canvas>

        <!-- javascript 代码 -->

        <script type="text/javascript">

            // 1. 获取画板

            var myCanvas = document.getElementById("my_canvas");

            /* 不能 使用 css 设置 canvas 的 width 和 height */

            // 给画布一个颜色

            myCanvas.style.backgroundColor = "#eee";

            // 2. 获取画笔

            var pen = myCanvas.getContext("2d");

            // 画一个填充矩形

            pen.beginPath();

            pen.fillStyle = 'red';    // 一定要在绘制之前设置好 颜色

            pen.fillRect(100, 100, 200, 200);

            // 画一个描边矩形

            pen.beginPath();

            pen.strokeStyle = 'blue';    // 一定要在绘制之前设置好 颜色

            pen.lineWidth = 20;    // 一定要在绘制之前设置好 笔宽

            pen.strokeRect(150, 150, 100, 100);    // 宽高从 线的中线开始算

        </script>

    </body>

</html>

练习2.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="./css/index.css" />

        <script type="text/javascript" src="./js/kjfFunctions.js"></script>

        <script type="text/javascript" src="./js/index.js"></script>

        <style type="text/css">

            body {

                width: 100%;

                color: #000;

                background: #96b377;

                font: 14px Helvetica, Arial, sans-serif;

                text-align: center;

            }

        </style>

    </head>

    <body>

        <canvas id="my_canvas" width="600" height="600">

            您的浏览器不支持 canvas，建议更新或者更换浏览器。

        </canvas>

        <!-- javascript 代码 -->

        <script type="text/javascript">

            // 1. 获取画板

            var myCanvas = document.getElementById("my_canvas");

            /* 不能 使用 css 设置 canvas 的 width 和 height */

            // 给画布一个颜色

            myCanvas.style.backgroundColor = "#eee";

            // 2. 获取画笔

            var pen = myCanvas.getContext("2d");

            // 3. 一次绘画的开始

            pen.beginPath();

            // 4. 一定要在绘制之前 设置好（可以在 pen.beginPath()之前设置）

            pen.fillStyle = 'red';    // 填充的颜色

            pen.strokeStyle = 'blue';    //  笔的颜色

            pen.lineWidth = 4;    // 笔宽

            pen.lineCap = "round";    // 圆形结束

            pen.lineJoin = "round";    // 圆角

　　         // 5. 终于可以开始画了

            pen.moveTo(100, 100);

            pen.lineTo(100, 200);

            pen.lineTo(150, 250);

            pen.closePath();

            // 画布 总是显示 .beginPath() 和 .closePath() 之间的绘画____所以，需要的话，要成对出现
            pen.beginPath();   
            pen.moveTo(300, 300);
            pen.lineTo(500, 300);
            pen.lineTo(500, 500);
            pen.lineTo(300, 500);
            pen.closePath();    // 闭合路径
/**** 6. 一定要记得的 .stroke()临摹 ****/

        pen.stroke();

        </script>

    </body>

</html>

签名，DIY 画板 案例

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="./css/index.css" />

        <script type="text/javascript" src="./js/kjfFunctions.js"></script>

        <script type="text/javascript" src="./js/index.js"></script>

        <style type="text/css">

            /**** btns ****/

            #btns button {

                padding: 0 10px;

                background-color: #565628;

                width: 116px;

                height: 30px;

                color: #c0cea7;

                font-size: 18px;

                line-height: 30px;

                text-align: center;

                outline: none;

                border: 0 none;

            }

            #btns button:hover {

                color: #bda0f1;

                font-size: 24px;

            }

            #btns button:active {

                color: #bda0f1;

                font-size: 18px;

            }

            body {

                width: 100%;

                color: #000;

                background: #96b377;

                font: 14px Helvetica, Arial, sans-serif;

            }

            #wrap {

                display: flex;

                flex-direction: column;

                justify-content: center;

                align-items: center;

            }

            #wrap #btns{

                width: 600px;

                height: 100px;

                display: flex;

                justify-content: space-around;

                align-items: space-around;

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <canvas id="my_canvas" width="600" height="600">

                您的浏览器不支持 canvas，建议更新或者更换浏览器。

            </canvas>

            <div id="btns">

                <button id="eraser">橡皮擦</button>

                <button id="the_black">画笔</button>

                <input id="chg_color" type="color" name="penColor" />

                <button id="add_width">笔粗</button>

                <button id="dec_width">笔细</button>

            </div>

        </div>

        <!-- javascript 代码 -->

        <script type="text/javascript">

            // 1. 获取画板

            var myCanvas = document.getElementById("my_canvas");

            /* 不能 使用 css 设置 canvas 的 width 和 height */

            // 给画布一个颜色

            myCanvas.style.backgroundColor = "#eee";

            // 2. 获取画笔

            var pen = myCanvas.getContext("2d");

            var chgColor = document.getElementById("chg_color");

            // 3. 一定要在绘制之前 设置好

            pen.fillStyle = 'red';    // 填充的颜色

            pen.strokeStyle = chgColor.value;    //  笔的颜色

            pen.lineWidth = 4;    // 笔宽

            pen.lineCap = "round";    // 圆形结束

            pen.lineJoin = "round";    // 圆角

            chgColor.addEventListener("change", watchColorPicker, false);

            function watchColorPicker(event) {

                pen.strokeStyle = chgColor.value;

            };

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

            eraser.onclick = function(){

                pen.strokeStyle = myCanvas.style.backgroundColor;

            };

            var theBlack = document.getElementById("the_black");

            theBlack.onclick = function(){

                pen.strokeStyle = chgColor.value;

            };

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

            add_width.onclick = function(){

                pen.lineWidth++;

            };

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

            dec_width.onclick = function(){

                pen.lineWidth--;

                if(pen.lineWidth <= 0){

                    pen.lineWidth = 1;

                }

            };

            myCanvas.onmousedown = function(e){

                e = e || window.event;

                myCanvas.setCapture && myCanvas.setCapture();

                var canvasX = myCanvas.getBoundingClientRect().left;

                var canvasY = myCanvas.getBoundingClientRect().top;

                // 4. 一次绘画的开始

                pen.beginPath();

                pen.moveTo(e.clientX-canvasX, e.clientY-canvasY);

                myCanvas.onmousemove = function(e){

                    e = e || window.event;

                    pen.lineTo(e.clientX-canvasX, e.clientY-canvasY);

                    /**** 5. 一定要记得的 临摹 ****/

                    pen.stroke();

                };

                myCanvas.onmouseup = function(){

                    myCanvas.onmousemove = null;

                    myCanvas.onmouseup = null;

                    myCanvas.releaseCapture && myCanvas.releaseCapture();

                };

                e.preventDefault && e.preventDefault();

                return false;

            };

        </script>

    </body>

</html>

五角星 案例

画布原点(0, 0) 位移 painting.translate(100, 100);

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="./css/index.css" />

        <script type="text/javascript" src="./js/kjfFunctions.js"></script>

        <script type="text/javascript" src="./js/index.js"></script>

        <style type="text/css">

            /**** btns ****/

            #btns button {

                padding: 0 10px;

                background-color: #565628;

                width: 116px;

                height: 30px;

                color: #c0cea7;

                font-size: 18px;

                line-height: 30px;

                text-align: center;

                outline: none;

                border: 0 none;

            }

            #btns button:hover {

                color: #bda0f1;

                font-size: 24px;

            }

            #btns button:active {

                color: #bda0f1;

                font-size: 18px;

            }

            body {

                width: 100%;

                color: #000;

                background: #96b377;

                font: 14px Helvetica, Arial, sans-serif;

            }

            #wrap {

                display: flex;

                flex-direction: column;

                justify-content: center;

                align-items: center;

            }

            #wrap #btns{

                width: 600px;

                height: 100px;

                display: flex;

                justify-content: space-around;

                align-items: space-around;

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <canvas id="my_canvas" width="1000" height="900">

                您的浏览器不支持 canvas，建议更新或者更换浏览器。

            </canvas>

        </div>

        <!-- javascript 代码 -->

        <script type="text/javascript">

            // 1. 获取画板

            var myCanvas = document.getElementById("my_canvas");

            /* 不能 使用 css 设置 canvas 的 width 和 height */

            // 给画布一个颜色

            myCanvas.style.backgroundColor = "#eee";

            // 2. 获取画笔

            var pen = myCanvas.getContext("2d");

            // 3. 一定要在绘制之前 设置好

            pen.fillStyle = 'olive';    // 填充的颜色

            pen.strokeStyle = "blue";    //  笔的颜色

            pen.lineWidth = 4;    // 笔宽

            pen.lineCap = "round";    // 圆形结束

            pen.lineJoin = "round";    // 圆角

            // 4. 一次绘画的开始

            pen.beginPath();

            drawStar(pen, 300, 300, 100,40);

            pen.closePath();

            /* 5. 一定要记得的 临摹 */

            pen.stroke();

            /**** 封装函数 ****/

            function drawStar(pen, centerX, centerY, R, r){

                pen.beginPath(centerX, centerY+R);

                pen.moveTo(centerX+R*Math.cos(18*Math.PI/180),centerY-R*Math.sin(18*Math.PI/180));

                for(var i=0;i<5;i++){

                    pen.lineTo(centerX+R*Math.cos((72*i+18)*Math.PI/180),centerY-R*Math.sin((72*i+18)*Math.PI/180))

                    pen.lineTo(centerX+r*Math.cos((72*i+54)*Math.PI/180),centerY-r*Math.sin((72*i+54)*Math.PI/180))

                };

            };

        </script>

    </body>

</html>

圆形绘制

painting.arc(圆形点, 弧度, 起始弧度, 终点弧度, false 顺时针);
painting.arc(200, 200, 100, 0, 2*Math.PI);
painting.arc(200, 200, 100, 0, 0.5*Math.PI); // 顺时针画 1/4 个圆弧
painting.arc(200, 200, 100, 0, 0.5*Math.PI, true); // 逆时针画 3/4 个圆弧

圆弧绘制

HTML5_canvas 画布的更多相关文章

06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
如何快速清除ZBrush画布中多余图像
ZBrush是一款数字雕刻与绘画软件,它以强大的功能和直观的工作流程彻底改变了整个三维行业.它的简洁化.智能化和人性化的设计无不让众多用户所折服.刚接触它的用户可能会因为找不到相关命令或不熟悉而觉得它 ...
矢量图绘制工具Svg-edit调整画布的大小
矢量图绘制工具Svg-edit调整画布的大小 ------------------------------ ------------------------
HTML5 中的 canvas 画布（一）
---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...
html 5 canvas画布整理
1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" >< ...
Quartz 2D在ios中的使用简述二：创建画布
在iOS中使用Quartz画图时,第一步就是要获取画布(图形上下文),然后再画布上做各种操作.先看下CoreGraphics.h这个头文件,就可以知道能够创建多少种上下文类型. #include &l ...
HTML5 Canvas 画布
一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素加上基本的属 ...
解决CHROME中画布中无法显示图片的方法
最终效果图如下我按照W3SCHOOL里面的方法,代码如下 <!DOCTYPE html> <html> <body> <script type=" ...
HTML5 canvas画布写炫彩动态的倒计时效果
html代码如下,插入了2个js代码. <!DOCTYPE html> <html> <head> <title>canvas</title> ...

随机推荐

Karma (Test runner)
Karma https://baike.baidu.com/item/%E7%BE%AF%E7%A3%A8/7618552?fromtitle=Karma&fromid=878453 1,意译 ...
DUMP2 企业级电商项目
正常设计数据库表,按照数据流向. ~~闭环核心业务 [1用户]登录 =>浏览[2分类]+浏览[3商品]=>加入[4购物车]=>结算[5订单]+[6收货地址]=>[7支付] [购 ...
Scrapy框架-----爬虫
说明:文章是本人读了崔庆才的Python3---网络爬虫开发实战,做的简单整理,希望能帮助正在学习的小伙伴~~ 1. 准备工作: 安装Scrapy框架.MongoDB和PyMongo库,如果没有安装, ...
用agular2做文件上传功能杂记-遁地龙卷风
(-1)功能描述写一个功能,前台发起执行请求,后台执行任务,前台可以获取执行的进度,并取得最后的执行状态. (0)angular2 $http文件上传这里之所以不用angular-file-upl ...
Subsequence（序列自动机模板题）
题目链接:https://nanti.jisuanke.com/t/38232 题目大意:给你一个字符串,然后再给你m个字符串,然后问你在第一个字符串中不连续的子串能不能构成输入的子串. 具体思路:构 ...
python常用校验方法总结
0x00 校验一个字符串是否是合法IP地址 ipv4举例:利用正则表达式来匹配 def checkip(ip): p = re.compile('^((25[0-5]|2[0-4]\d|[01]?\d ...
mysql之concat concat_ws group_concat
concat.concat_ws.group_concat都可以用来连接字符串. concat和concat_ws用来连接同一行中不同列的数据,group_ws用来连接同一列的数据. 格式如下: co ...
anaconda3安装cv2模块（python3.6）
k64 datasheet学习笔记25--Multipurpose Clock Generator (MCG)
0.前言 MCG模块为MCU提供了几种可选时钟源.模块包含一个FLL和一个PLL.FLL使用内部或外部参考时钟是可控的,PLL受外部参考时钟控制模块可以选择FLL或PLL输出时钟,或内/外部参考时钟 ...
css :root 选择器
:root css 伪类匹配文档的根元素. 对于 HTML 来说, :root 表示<html>元素,除了优先级更高之外,与 html 选择器相同. 在声明全局 css 变量时 :root ...

HTML5_canvas 画布

HTML5_canvas 画布的更多相关文章

随机推荐

热门专题