基础的canvas学习（1）

挽风-

已于 2022-12-11 22:42:29 修改

阅读量1.2k

点赞数

分类专栏： canvas 文章标签： javascript html5

于 2022-04-28 21:12:51 首次发布

本文链接：https://blog.youkuaiyun.com/qq_46113598/article/details/124483206

版权

canvas 专栏收录该内容

2 篇文章

订阅专栏

0-1初学绘制正方形

 <canvas id="canvas" width="500" height="500"></canvas>
    <script>

        //获取canvas
        const canvas = document.getElementById('canvas')
        //画布对象
        const app = canvas.getContext('2d')
        //填充颜色
        app.fillStyle = 'skyblue';
        //绘制正方形
        app.fillRect(0, 0, 200, 200);
    </script>

渲染完成：

0-2.绘制一长方形

 <canvas id="canvas"></canvas>
    <script>
        //获取元素
        const canvas = document.getElementById('canvas');
        //创建画布
        const app = canvas.getContext('2d');
        //设置填充颜色
        app.fillStyle = 'red';
        //绘制图形
        app.fillRect(0, 0, 200, 400);
    </script>

渲染完成：

0-3绘制空心矩形

 <canvas id="canvas" width="500" height="500"> </canvas>
    <script>
        let canvas = document.getElementById('canvas');
        let app = canvas.getContext('2d');
        //设置填充颜色
        app.strokeStyle = 'red';
        //设置边框宽度
        app.lineWidth = 50;
        //设置边角类型可以设置：bevel斜角，round圆角，miter尖角
        // app.lineJoin = 'bevel';
        // app.lineJoin = 'round';
        // app.lineJoin = 'miter';
        //默认尖角  在不设置lineJoin值时
        //参数x,y,w,h
        app.strokeRect(50, 50, 400, 400);
    </script>

0-4画一个圆圆环环

 <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        let canvas = document.getElementById('canvas');
        let app = canvas.getContext('2d');
        //设置填充颜色
        app.strokeStyle = 'red';
        //设置边框宽度
        app.lineWidth = 40;
        //绘制圆的函数arc()圆心,(x,y),r,sAngle起始角，
        // eAngle结束角（弧度制），
        // （可选counterclockwise true顺时针）
        app.arc(200, 200, 160, 0, 2 * Math.PI);
        //画
        app.stroke();
    </script>

0-5绘制实心圆

<canvas id="canvas" width="500" height="500"></canvas>
    <script>
        let canvas = document.getElementById('canvas');
        let app = canvas.getContext('2d');
        //填充画布颜色
        //开始路径
        app.beginPath();
        app.fillStyle = 'red';
        //默认颜色黑色
        // app.lineWidth = 40
        app.arc(200, 200, 140, 0, 2 * Math.PI);
        app.closePath();
        app.fill()
    </script>

0-6绘制一个三角形

<canvas id="canvas" width="500" height="500"> </canvas>

    <script>
        //获取元素
        let canvas = document.querySelector('#canvas');
        //创建画布
        let app = canvas.getContext('2d');
        //设置填充颜色
        app.fillStyle = 'green';
        //绘制图形
        app.fillRect(0, 0, 500, 500);
        //开始划线
        app.beginPath();
        //设置线宽
        app.lineWidth = 10;
        //从这点开始
        app.moveTo(250, 0);
        //到这点
        app.lineTo(500, 250);
        //接着到这点
        app.lineTo(0, 250)
        //设置划线的颜色
        app.strokeStyle = 'red'
        //将起始点与结束点相连
        app.closePath();
        //画线
        app.stroke();
    </script>

0-7渐变效果局部填充

<canvas id="canvas" width="500" height="500"></canvas>

    <script>
        //获取元素
        let canvas = document.getElementById('canvas');
        //创建画布
        let app = canvas.getContext('2d');
        //创建渐变效果（x0,y0,x1,y1）
        let gradient = app.createLinearGradient(0, 0, 500, 500);
        //开始绘制参数1为位置，2渐变颜色
        gradient.addColorStop(0, 'red')
        gradient.addColorStop(0.5, 'green')
        gradient.addColorStop(1, 'blue')
        //渐变填充
        app.strokeStyle = gradient;
        //边框宽度
        app.lineWidth = 50;
        //绘制图形
        app.strokeRect(100, 100, 300, 300);
        // let canvas = document.querySelector('#canvas');
        // let app = canvas.getContext('2d');
        // let gradient = app.createLinearGradient(0, 0, 500, 500);
        // gradient.addColorStop(0, ' #6666ff');
        // gradient.addColorStop(0.5, " #ffb366");
        // gradient.addColorStop(1, " #4d4dff");

        // app.strokeStyle = gradient;
        // app.lineWidth = 50;
        // app.strokeRect(100, 100, 300, 300)

    </script>

0-8渐变效果全面填充

 <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        //获取元素
        let canvas = document.getElementById('canvas');
        //创建画布
        let app = canvas.getContext('2d');
        //创建渐变
        let gradient = app.createLinearGradient(0, 0, 500, 500)
        //设置
        gradient.addColorStop(0, 'red');
        gradient.addColorStop(0.5, 'blue');
        gradient.addColorStop(1, 'green');
        //设置颜色
        app.fillStyle = gradient;
        //绘制图形
        app.fillRect(0, 0, 500, 500);

    </script>

0-9某一区域变成透明

 <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        //创建画布
        let canvas = document.querySelector('#canvas').getContext('2d');
        //设置填充颜色
        canvas.fillStyle = 'red';
        //设置填充区域
        canvas.fillRect(0, 0, 500, 500);
        //清楚区域(x0,y0,x,y)初始值 宽高
        canvas.clearRect(200, 200, 100, 100);

    </script>

0-10填充文字

<script>

        let canvas = document.getElementById('canvas').getContext('2d');
        canvas.fillStyle = 'red'
        canvas.font = '23px CascadiaMono';
        //设置基线
        canvas.textBaseline = 'top';
        //设置文字位置
        canvas.textAlign = 'left';

        //fillText填充文本 参数一：text文本，参数2：（x,y）(相对于画布)，参数3：Maxheight文字最大高度
        canvas.fillText('今天星期五，明天星期六,再有一天我就要放假了', 1, 100)
        canvas.strokeRect(0, 0, 500, 500);
    </script>

0-11渐变颜色

<canvas id="canvas" width="500" height="500"></canvas>
    <script>
        let canvas = document.getElementById('canvas').getContext('2d');
        let gradient = canvas.createLinearGradient(0, 0, 500, 500);
        gradient.addColorStop(0, 'red');
        gradient.addColorStop(0.5, 'blue');
        gradient.addColorStop(1, 'pink');
        canvas.strokeStyle = gradient;
        canvas.font = '40px CascadiaMono';
        canvas.textAlign = 'left';
        canvas.textBaseline = 'top';
        canvas.strokeText('这是一个canvas渐变效果', 50, 200);


    </script>

0-12图片进行填充

<canvas id="canvas" width="600" height="600"></canvas>
    <script>
        //创建画布
        let canvas = document.getElementById('canvas').getContext('2d');
        //创建图片对象
        let img = new Image();
         //引入一张本地图片
        img.src = 'test.jpg';
        //加载图片
        img.onload = () => {
            //创建规则
            let pat = canvas.createPattern(img, 'no-repeat');
            //指定填充样式
            canvas.fillStyle = pat;
            canvas.fillRect(0, 0, 600, 600)
        }
    </script>

0-13图片的缩放

 <canvas id="canvas" height="500" width="500"></canvas>
    <script>
        let el = document.getElementById('canvas');
        let canvas = el.getContext('2d');
        let img = new Image();
        img.src = 'test.jpg'
        // el.heigth = 400;
        img.onload = () => {
            canvas.drawImage(img, 0, 0, img.naturalWidth * scale(img, el), img.naturalHeight * scale(img, el));
        }
        function scale(img, el) {
            // console.log('canvas-width', el.width);
            console.log('canvas-heigth', el.height);
            // console.log('imgw', img.naturalWidth);
            // console.log(el.width / img.naturalWidth);
            // console.log(el.heigth / img.naturalHeight);
            return Math.min((el.width / img.naturalWidth), (el.height / img.naturalHeight))
        }

    </script>

0-14随机生成像素点

<canvas id="canvas" width="500" height="500"></canvas>
    <script>
        console.time();
        let el = document.querySelector('#canvas')
        let canvas = el.getContext('2d');
        canvas.fillStyle = 'red';
        canvas.fillRect(0, 0, el.width, el.height)
        for (let j = 0; j < 1000; j++) {
            let w = Math.floor(el.width * Math.random())
            let h = Math.floor(el.height * Math.random())
            canvas.fillStyle = '#fff';
            canvas.rect(w, h, 5, 5)
            canvas.fill();
        }
        console.timeEnd();
    </script>

0-15绘制不规则图形

<canvas id="canvas" width="500" height="500"></canvas>

    <script>
        let el = document.querySelector('#canvas');
        let canvas = el.getContext('2d');
        canvas.fillStyle = '#000000';
        canvas.fillRect(0, 0, el.width, el.height)
        for (let j = 0; j < 15; j++) {
            canvas.beginPath();
            let arrcolor = ['yellow', ' #0047b3', ' #ff0000', 'red', 'pink', 'skyblue']
            canvas.fillStyle = arrcolor[Math.floor(Math.random() * 5)]
            let x = Math.floor(Math.random() * el.width);
            let y = Math.floor(Math.random() * el.height);
            let r = Math.floor(Math.random() * (90 - 20)) + 20;//
            canvas.arc(x, y, r, 0, 2 * Math.PI);
            canvas.closePath()
            canvas.fill()
        }
    </script>