bunny笔记|canvas常用的基础方法以及属性

作者: 一只小小小bunny | 来源:发表于2022-04-15 15:17 被阅读0次

bunny笔记|canvas常用的基础方法以及属性
H5 API-Canvas
数组基础
数组基础
Canvas绘制文字、设置阴影、创建路径绘制矩形和圆
UITableView常用方法以及属性
IOS开发(三)高级控件
2019-10-08
Android canvas 基础图形详解
DOM操作和样式操作库的封装

canvas

1.canvas是什么？

是HTML5提供的一种新标签(绘制图形图像的标签)

2.canvas可以做什么

a.制作可视化数据图形图表
b.制作页面特效效果
c.制作H5小游戏

3.canvas如何使用(重点)

html
<canvas></canvas>

<canvas id="canvas">
    当前浏览器不支持canvas标签，请换一个浏览器试试。
</canvas>

//获取页面相关的元素
    var canvas = document.getElementById("canvas");
    
//设置画布的大小(默认只有300x150)
    canvas.width = 600;
    canvas.height = 800;
    
//获取canvas绘制上下文环境(画笔)
    var ctx = canvas.getContext("2d");

在浏览器端打开console，输出ctx可以打印出ctx带有的属性和方法，如图：

canvass方法和属性.png

以下操作是在如上600x800的画布上实现的绘制

围绕canvas提供的API实现一些常用的属性和方法

canvas画直线

js
(moveTo()和lineTo())

 // ... (接上面)

    //(x0,y0) (100,100)
    //(x1,y1) (500,100)
    //设置画笔的起点
    ctx.moveTo(100,100);
    //设置画笔的终点(移动的坐标)
    ctx.lineTo(500,100);
    //设置描边的颜色
    ctx.stroke();

绘制直线.png

canva画三角形

(beginPath()和ctx.closePath())

 // ... (接上面)
 
    //坐标点
    //A(100,100) B(300,100) C(200,300)
    //开始路径(下笔)
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(300, 100);
    ctx.lineTo(200, 300);
    // ctx.lineTo(100,100);
    //结束路径(提笔)
    ctx.closePath();

    //描边
    ctx.stroke();

canvas描边相关的属性

//获取页面相关的元素
var canvas = document.getElementById("canvas");
//设置画布的大小(默认只有300x150)
canvas.width = 600;
canvas.height = 800;
//获取canvas绘制上下文环境(画笔)
var ctx = canvas.getContext("2d");

//绘制线1
ctx.beginPath();
ctx.moveTo(100, 50);
//设置画笔的终点(移动的坐标)
ctx.lineTo(500, 50);
//设置描边的颜色
ctx.stroke();
ctx.closePath();

//绘制线2
ctx.beginPath();
ctx.moveTo(100, 70);
//设置画笔的终点(移动的坐标)
ctx.lineTo(500, 70);
//设置线宽度值
ctx.lineWidth = 0.3;
//设置描边的颜色
ctx.stroke();
ctx.closePath();

//绘制线3
ctx.beginPath();
ctx.moveTo(100, 100);
//设置画笔的终点(移动的坐标)
ctx.lineTo(500, 100);
//设置线宽度值
ctx.lineWidth = 5;
//butt(默认) round(圆头) square(方头)
ctx.lineCap = "round";
//设置描边的颜色
ctx.stroke();
ctx.closePath();

//绘制线4
ctx.beginPath();
ctx.moveTo(100, 110);
//设置画笔的终点(移动的坐标)
ctx.lineTo(500, 110);
//设置线宽度值
 ctx.lineWidth = 2;
//设置绘制边的颜色样式等,支持十六进制颜色值(#fff00)/颜色单词定义("red")/Rgb(rgb(0,250,0))
 ctx.strokeStyle = "red"
//设置描边的颜色
ctx.stroke();
ctx.closePath();

绘制三角形.png

关于填充(给三角形填充颜色)
(fill())

//获取页面相关的元素
var canvas = document.getElementById("canvas");
//设置画布的大小(默认只有300x150)
canvas.width = 600;
canvas.height = 800;
//获取canvas绘制上下文环境(画笔)
var ctx = canvas.getContext("2d");

//坐标点
//A(100,100) B(300,100) C(200,300)
//开始路径(下笔)
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.lineTo(200, 300);
ctx.fillStyle = "red";
ctx.fill();

// ctx.lineTo(100,100);
//结束路径(提笔)
ctx.closePath();

//描边
ctx.stroke();

颜色填充三角形

canvas里绘制坐标系

js
(在canvas里，向下和向右为+，向上和向左为-。注意别弄错方向)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas系列教程</title>
</head>

<body>
    <canvas id="canvas">
        当前浏览器不支持canvas标签,请换一个浏览器试试。
    </canvas>

    <script>
        //获取页面相关的元素
        var canvas = document.getElementById("canvas");
        //设置画布的大小(默认只有300x150)
        canvas.width = 600;
        canvas.height = 800;
        //获取canvas绘制上下文环境(画笔)
        var ctx = canvas.getContext("2d");

        //定义point记录坐标位置
        let point = {
            x: 50,
            y: 500
        }
        // //绘制X轴，向左减，向右加
        // ctx.beginPath();
        // ctx.strokeStyle = 'red';
        // ctx.moveTo(point.x, point.y);
        // ctx.lineTo(point.x + 500, point.y);
        // ctx.stroke();
        // ctx.closePath();
        // //箭头(1)上
        // ctx.beginPath();
        // ctx.strokeStyle = "red";
        // ctx.moveTo(point.x + 500, point.y);
        // ctx.lineTo(point.x + 490, point.y - 10);
        // ctx.stroke();
        // ctx.closePath();
        // //箭头(2)下
        // ctx.beginPath();
        // ctx.strokeStyle = "red";
        // ctx.moveTo(point.x + 500, point.y);
        // ctx.lineTo(point.x + 490, point.y + 10);
        // ctx.stroke();
        // ctx.closePath();

        // //绘制y轴,向下加，向上减
        // ctx.beginPath();
        // ctx.strokeStyle = 'blue';
        // ctx.moveTo(point.x, point.y);
        // ctx.lineTo(point.x, point.y - 500);
        // ctx.stroke();
        // ctx.closePath();
        // //箭头(1)右
        // ctx.beginPath();
        // ctx.strokeStyle = "blue";
        // ctx.moveTo(point.x, point.y - 500);
        // ctx.lineTo(point.x + 10, point.y - 490);
        // ctx.stroke();
        // ctx.closePath();
        // //箭头(2)左
        // ctx.beginPath();
        // ctx.strokeStyle = "blue";
        // ctx.moveTo(point.x, point.y - 500);
        // ctx.lineTo(point.x - 10, point.y - 490);
        // ctx.stroke();
        // ctx.closePath();


        //封装处理，优化代码

        //定义绘制线的函数
        var drawLine = function (x0, y0, x1, y1, color = "red") {
            ctx.beginPath();
            ctx.strokeStyle = 'red';
            ctx.moveTo(x0, y0);
            ctx.lineTo(x1, y1);
            ctx.strokeStyle = color;
            ctx.stroke();
            ctx.closePath();
        }
        //函数封装的是可重复利用的代码块
        //绘制X轴
        drawLine(point.x,
            point.y,
            point.x + 500,
            point.y
        )
        //箭头1
        drawLine(
            point.x + 500,
            point.y,
            point.x + 490,
            point.y - 10
        )
        //箭头2
        drawLine(
            point.x + 500,
            point.y,
            point.x + 490,
            point.y + 10
        )

        //绘制Y轴
        drawLine(
            point.x,
            point.y,
            point.x,
            point.y - 500
        )
        //箭头1
        drawLine(
            point.x + 10,
            point.y - 490,
            point.x,
            point.y - 500,
            color = "blue"
        )
        //箭头2
        drawLine(
            point.x - 10,
            point.y - 490,
            point.x,
            point.y - 500,
            color = "blue"
        )

    </script>
</body>

</html>

canvas绘制坐标系

canvas绘制网格线

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas系列教程</title>
</head>

<body>
    <canvas id="canvas">
        当前浏览器不支持canvas标签,请换一个浏览器试试。
    </canvas>

    <script>
        //获取页面相关的元素
        var canvas = document.getElementById("canvas");
        //获取canvas绘制上下文环境(画笔)
        var ctx = canvas.getContext("2d");

        //定义几行几列行行列列行列间距
        var row = 20;
        var col = 15;
        var space = 30;
        //设置画布的大小
        canvas.width = col * space + 100;
        canvas.height = row * space + 100;
        //定义绘制线的函数
        var drawLine = function (x0, y0, x1, y1, color = "red") {
            ctx.beginPath();
            ctx.moveTo(x0, y0);
            ctx.lineTo(x1, y1);
            ctx.strokeStyle = color;
            ctx.stroke();
            ctx.closePath();
        }

        //传值测试canvas是否绘制出来
        // drawLine(80,80,500,100);

        //通过循环绘制行
        for (let i = 0; i <= row; i++) {
            //绘制行,水平方向的起始位置和终止位置固定0和500
            drawLine(
                0,
                i * space,
                col * space,
                i * space
            );

        }

        for (let j = 0; j <= col; j++) {
            //绘制列
            drawLine(
                j * space,
                0,
                j * space,
                row * space
            );
        }

    </script>
</body>

</html>

canvas绘制网格线

canvas绘制矩形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas练习</title>
</head>

<body>
    <canvas id="canvas">canvas练习</canvas>
    <script>
        //获取canvas元素
        let canvas = document.getElementById("canvas");
        canvas.width = 600;
        canvas.height = 800;
        //获取canvas绘图环境(拿到画笔工具)
        let ctx = canvas.getContext("2d");

        //绘制矩形
        //方法1
        // ctx.beginPath();
        // //水平绘制一条直线
        // ctx.moveTo(100, 100);
        // ctx.lineTo(400, 100);
        // //后垂直画一条
        // ctx.lineTo(400,200);
        // //再水平画一条
        // ctx.lineTo(100,200);
        // //最后画一条垂直线
        // ctx.lineTo(100,100)
        // //收尾
        // ctx.closePath();
        // ctx.strokeStyle="red";
        // //绘制
        // ctx.stroke();

        // //方法2:rect()
        // //设置矩形的状态(x坐标,y坐标,w宽度,h高度)
        // ctx.rect(
        //     100,100,300,100
        // )
        // ctx.stroke();

        //方法3：strokeRect()
        //设置矩形的状态(x坐标,y坐标,w宽度,h高度)
        // ctx.strokeStyle = "red";
        // ctx.strokeRect(
        //     100, 100, 300, 100
        // )

        //填充颜色
        ctx.fillStyle = "yellow";
        ctx.fillRect(
            100, 100, 300, 100
        )

    </script>


</body>

</html>

canvas绘制矩形

canvas绘制绘制弧

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制</title>
</head>

<body>
    <canvas id="canvas">canvas绘制</canvas>
    <script>
        let canvas = document.getElementById("canvas");
        canvas.width = 600;
        canvas.height = 800;
        let ctx = canvas.getContext("2d");

        //绘制弧形
        //ctx.arc(x坐标,y坐标,r半径，startRad开始弧度,endRad结束弧度，boolean布尔值)
        //xy得到圆心，弧度绘制方向为顺时针方向，弧度=角度*Math.PI/180
        //注意：boolean布尔值是一个可选参数，默认为false。(true表示逆时针，false表示顺时针)

        //绘制圆
        // ctx.arc(
        //     200,
        //     200,
        //     100,
        //     0,
        //     360*Math.PI/180,
        //    true
        // )
        // ctx.stroke();

        //绘制弧
        ctx.arc(
            200,
            200,
            100,
            0,
            130* Math.PI / 180,
            false
        )
        // ctx.stroke();
        //也可以填充
        ctx.fill()


    </script>
</body>

</html>

canvas绘制绘制弧

arcTo绘制弧线

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制</title>
    <link rel="stylesheet" href="./css/base.css">
</head>
<!-- <style>
    body {
        margin: 0;
    }

    canvas {
        background-color: aliceblue;
    }
</style> -->

<body>
    <canvas id="canvas">canvas绘制</canvas>
    <script>
        let canvas = document.getElementById("canvas");
        canvas.width = 600;
        canvas.height = 800;
        let ctx = canvas.getContext("2d");

        //arcTo()是以定点来绘制弧度的，三个定点坐标，其中两个点为开始和结束位置，另一个点为弧度延伸的切点位置

        //定义坐标1
        let p1={
            x:100,
            y:50
        }
         //定义坐标2
         let p2={
            x:300,
            y:100
        }
         //定义坐标3
         let p3={
            x:500,
            y:400
        }
        ctx.moveTo(p1.x,p1.y);
        //由p1,p2,p3三个坐标点组成一个角，还有一个半径，可以绘制出一个曲线
        //p2,p3作为控制点
        //这里半径设置为200
        ctx.arcTo(
            p2.x,
            p2.y,
            p3.x,
            p3.y,
           500
        )
        ctx.stroke();
        

    </script>
</body>

</html>

arcTo绘制弧线

canvas绘制贝塞尔曲线

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制</title>
    <link rel="stylesheet" href="css/base.css">
</head>

<body>
    <canvas id="canvas">canvas绘制</canvas>
    <script>
        let canvas = document.getElementById("canvas");
        canvas.width = 600;
        canvas.height = 800;
        let ctx = canvas.getContext("2d");

        //绘制二次贝塞尔曲线
        ctx.beginPath();
        //定义数组 记录控制点和结束点坐标
        let arr1 = [72, 203],
            arr2 = [298, 47],
            arr3 = [277, 409],
            arr4 = [402,231]

        //设置起点
        ctx.moveTo(arr1[0], arr1[1]);
        //设置曲线的弯曲程度
        let drawQCurveTo = function (arr1, arr2, arr3) {
            ctx.quadraticCurveTo(
                arr2[0], arr2[1],//控制点
                arr3[0], arr3[1]//结束点
            );
            ctx.stroke();
            ctx.closePath();
        }

        drawQCurveTo(arr1,arr2,arr3)

        //三次贝塞尔曲线（略）

    </script>
</body>

</html>

canvas绘制贝塞尔曲线

canvas渲染文字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制</title>
    <link rel="stylesheet" href="css/base.css">
</head>

<body>
    <canvas id="canvas">canvas绘制</canvas>
    <script>
        let canvas = document.getElementById("canvas");
        canvas.width = 600;
        canvas.height = 800;
        let ctx = canvas.getContext("2d");

        //渲染文字1
        let str1="hello canvas";
        let str2="bunny lovely";
        //ctx.font=“字体大小 字体名称(宋体楷体等)”
        ctx.font="30px sans-serif";
        //ctx.fillText(文本,x,y,[maxLenth]);
        ctx.fillText(str1,0,50)
        ctx.strokeText(str2,0,100);

        //渲染文字2
        let str3 = "learn canvas";
        //设置字体的属性
        //字体大小 字体名称
        // ctx.font="40px 楷体";
        //加粗
        // ctx.font="bold 40px 楷体";
        //小写字母变大写字母
        //ctx.font="small-caps bold 40px 楷体";
        //设置字体样式
        ctx.font = "italic small-caps bold 40px 微软雅黑"
        ctx.fillText(str3, 100, 120);

        //字体渲染3
        //坐标
        let point = {
            x: 100,
            y: 150
        }
        //绘制一个矩形（填充）
        ctx.fillStyle = "#f00";
        ctx.fillRect(
            point.x,
            point.y,
            100,
            100
        )
        //绘制文本
        let str = "lucky day";
        ctx.fillStyle = "#000";
        ctx.font = "30px 宋体";
        //水平方向 left cnter right
        ctx.textAlign = "center";
        //垂直方向
        //ctx.textBaseline=""

        ctx.fillText(
            str,
            point.x,
            point.y
        )

        //测试字符串的宽度
        let w=ctx.measureText(str).width;
        console.log(w);//135

    </script>
</body>

</html>

canvas渲染文字

canvas设置图形透明度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制</title>
    <link rel="stylesheet" href="css/base.css">
</head>

<body>
    <canvas id="canvas">canvas绘制</canvas>
    <script>
        let canvas = document.getElementById("canvas");
        canvas.width = 600;
        canvas.height = 800;
        let ctx = canvas.getContext("2d");
        //定义绘制圆形的函数
        let drawCircle = function (x, y, r, color = "red") {
            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.arc(
                x,
                y,
                r,
                0,
                2 * Math.PI,
                false
            )
            ctx.fill();
        }

        // //绘制圆形
        // drawCircle(
        //     100,
        //     100,
        //     40,
        //     "rgba(0,0,255,0.3)"
        //     );

        //或者入下 设置全局透明度
        ctx.globalAlpha = 0.5;//默认值0~1
        //绘制第二个圆形
        drawCircle(
            200,
            200,
            50,
            "#f00"
        )
        drawCircle(
            60,
            60,
            50,
            "#ff0"
        )


    </script>
</body>

</html>

canvas设置图形透明度

canvas绘制50个随机大小以及颜色的圆形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制</title>
</head>

<body>
    <canvas id="canvas">canvas绘制</canvas>
    <script>
        let canvas = document.getElementById("canvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        let ctx = canvas.getContext("2d");

        //定义绘制圆形的函数
        let drawCircle = function (x, y, r, color = "red") {
            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.arc(
                x,
                y,
                r,
                0,
                2 * Math.PI,
                false
            )
            ctx.fill();
        }

        //定义产生随机数的函数 100-200
        let randomF = function (min, max) {
            return Math.floor(Math.random() * (max - min) + min);
        }
        //循环创建50个随机大小随机坐标随机颜色的圆形
        for (let i = 1; i <= 50; i++) {
            //半径 [50-100]
            let radius = randomF(50, 100);
            //坐标位置
            let x = randomF(100, window.innerWidth - 100);
            let y = randomF(100, window.innerHeight - 100);
           
            let rgb="rgb("+randomF(0,256)+","+randomF(0,256)+","+randomF(0,256)+","+randomF(0,256)+")";
            
            //绘制图形
            drawCircle(
                x,
                y,
                radius,
                rgb
            )

        }
    </script>
</body>

</html>

canvas绘制50个随机大小以及颜色的圆形

canvas图形的覆盖顺序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制</title>
</head>

<body>
    <canvas id="canvas">canvas绘制</canvas>
    <script>
        let canvas = document.getElementById("canvas");
        canvas.width = 600;
        canvas.height = 800;
        let ctx = canvas.getContext("2d");

        //定义坐标
        let point = {
            x: 200,
            y: 200
        }
        //绘制圆形(前者)
        ctx.beginPath();
        ctx.fillStyle = "#00f";
        ctx.arc(
            point.x,
            point.y,
            100, 0,
            2 * Math.PI,
            false
        )
        ctx.fill();

        //设置全局属性控制图形覆盖的先后顺序
        //ctx.globalCompositeOperation = "source-over";//默认属性
        ctx.globalCompositeOperation = "xor";

        //绘制的图像在重叠的时候的效果:
        //  ctx.globalcompositeOperation="source-over"(Default)
        // 默认是(source-over)后面绘制的图像覆盖前面绘制的图像
        //  "source-atop" //后面绘制的图像覆盖前面绘制的图像，但后面的图像只显示重叠部分
        //  "source-in" //后面绘制的图像覆盖前面绘制的图像，但只显示重叠部分
        //  "source-out" //只显示后绘制的图像，而且重叠部分被切掉
        //  "destination-over" //前面绘制的图像覆盖后面绘制的图像
        //  "destination-atop" //前面绘制的图像覆盖后面绘制的图像，但前绘制的图像只显示重看
        //  "destination-in" //前面绘制的图像覆盖后面绘制的图像，但只显示重叠部分
        //  "destination-out" //只显示前绘制的图像，而且重叠部分被切掉
        // "lighter" //重叠部分颜色叠加融合
        //  "copy" //只显示后绘制图像
        //  "xor" //异或，重叠部分被挖空


        //绘制矩形(后者)
        ctx.beginPath();
        ctx.fillStyle = "#f00";
        ctx.fillRect(
            point.x,
            point.y,
            200,
            100
        )
        ctx.fill();

    </script>
</body>

</html>

canvas图形的覆盖顺序

canvas设置图形文本阴影

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制</title>
</head>

<body>
    <canvas id="canvas">canvas绘制</canvas>
    <script>
        let canvas = document.getElementById("canvas");
        canvas.width = 600;
        canvas.height = 800;
        let ctx = canvas.getContext("2d");
        // shadowBlur 设置阴影的模糊度
        // shadowColor 设置阴影的颜色
        // shadowOffsetX 设置阴影的水平偏移量(正数，水平偏右，否则反之)
        // shadowOffsetY(正数，垂直向下，否则反之)
        ctx.shadowBlur = 10;
        ctx.shadowColor = "#f00"
        ctx.shadowOffsetX = 10;
        ctx.shadowOffsetY = 10;

        ctx.beginPath();
        ctx.fillStyle = "pink";
        ctx.fillRect(
            100,
            50,
            200,
            100
        )

        //绘制文本
        ctx.beginPath();
        ctx.fillStyle = "yellow";
        ctx.font = "50px 斜楷";
        ctx.fillText(
            "shadow text",
            100, 300
        )

    </script>
</body>

</html>

canvas设置图形文本阴影

bunny笔记|canvas常用的基础方法以及属性
canvas 1.canvas是什么？是HTML5提供的一种新标签(绘制图形图像的标签) 2.canvas可以做...
H5 API-Canvas
Canvas常用方法
数组基础
数组基础新建数组数组方法和属性数组常用方法数组的遍历方法
数组基础
数组基础新建数组数组方法和属性数组合并数组常用方法
Canvas绘制文字、设置阴影、创建路径绘制矩形和圆
Canvas绘制文字 1、属性 2、方法 Canvas设置阴影 Canvas创建路径，绘制矩形和圆 1、标识方法 ...
UITableView常用方法以及属性
UITableView数据源方法 - (NSInteger)numberOfSectionsInTableView...
IOS开发(三)高级控件
IOS基础控件思维导图三、高级控件 1、UITabBarController (1)常用属性 (2)常用方法 (...
2019-10-08
一：canvas的常用方法二：canvas基础图形详解绘制颜色绘制点绘制图形前先初始化一个画笔绘制一个点...
Android canvas 基础图形详解
一：canvas的常用方法二：canvas基础图形详解绘制颜色绘制点绘制图形前先初始化一个画笔绘制一个点...
DOM操作和样式操作库的封装
一、DOM常用方法和属性复习以下粗略的罗列一下DOM的常用方法和属性，由于不是介绍DOM的基础内容，所以就不一一...