canvas记录

最新推荐文章于 2023-06-15 10:48:27 发布

文刀木由

最新推荐文章于 2023-06-15 10:48:27 发布

阅读量647

点赞数

分类专栏：【网站前端】文章标签： html5 canvas 前端

本文链接：https://blog.csdn.net/U_9_5/article/details/50529604

版权

【网站前端】专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Html5那么热，使用了也这么久了，最近在JQuery库上看了很多前端搞的效果，那叫一个炫啊，昨天下载了几十套源码，无奈水平不够，看不懂，今天就先从canvas入手深入下去。

写了一个canvas v0.0.01版，能用的有：看截图吧
这里写图片描述

下面就看代码吧，都很简单、基础

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        canvas {
            border: 1px dashed gray;
        }
    </style>
</head>
<body>
    <div>
        <button onclick="clear2()">擦除</button>
        <button onclick="drawLinearGradient()">绘制线性</button>
        <button onclick="drawRectangle()">绘制矩形 - 填充颜色</button>
        <button onclick="drawRect()">绘制矩形-不填充颜色</button>
        <button onclick="drawArc()">圆</button>
    </div>
    <canvas width="400 " height="400" id="canvas"></canvas>
    <script type="text/javascript">
        //获取canvas结点
        var canvas = document.getElementById('canvas');
        //渲染2d
        var canvas2d = canvas.getContext('2d');
        (function () {
            drawLinearGradient();
        })();
        //绘制线性
        function drawLinearGradient() {

            //第一个起点
            canvas2d.moveTo(10, 10);
            //第二个起点
            canvas2d.lineTo(100, 200);
            //第三个点(以第二个点为起点)
            canvas2d.lineTo(10, 300);
            //添加渐变
            var addJB = canvas2d.createLinearGradient(0, 0, 300, 300);
            addJB.addColorStop(0, 'red');
            addJB.addColorStop(1, 'yellow');
            canvas2d.lineWidth = 1;
            //绘制样式
            canvas2d.strokeStyle = addJB;//也可以用 red;blue,00ff00等
            //绘制路径
            canvas2d.stroke();
        }

        //绘制矩形-填充颜色
        function drawRectangle() {
            var addJB = canvas2d.createLinearGradient(0, 0, 300, 300);
            addJB.addColorStop(0, 'red');
            addJB.addColorStop(1, 'yellow');
            canvas2d.fillStyle = addJB;//'red';
            canvas2d.fillRect(30, 30, 200, 200);
        }
        //绘制矩形-不填充颜色
        function drawRect() {

            canvas2d.strokeStyle = '#aaffaa';
            canvas2d.strokeRect(50, 50, 100, 100);
        }
        //绘制一个圆
        function drawArc() {
            canvas2d.beginPath();
            canvas2d.arc(150, 150, 100, 100, Math.PI, false);
            canvas2d.closePath();
            canvas2d.stroke();
        }

        //擦除 -只有在onload有效
        function clear() {
            canvas2d.clearRect(10, 10, 200, 200);
        }
        //擦除2
        function clear2() {
            canvas2d.fillStyle = 'white';
            canvas2d.fillRect(0, 0, canvas.width, canvas.height);
        }
    </script>
</body>
</html>

canvas v0.0.02版实现效果

这里写图片描述
描述：里面的圆自上而下移动，相当于雪花的飘动效果，半径，圆个数，颜色，透明度等项可随机改变。

贴代码，记录咱的第一次，哈哈，也希望能对你有帮助

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        canvas {
            border: 1px dashed gray;
        }
    </style>
</head>
<body>
    <div>
    </div>
    <canvas width="400 " height="400" id="canvas"></canvas>
    <script type="text/javascript">
        (function () {
            //获取canvas结点
            var canvas = document.getElementById('canvas');
            //渲染2d
            var canvas2d = canvas.getContext('2d');
            //填充背景色
            var clear = function () {
                canvas2d.fillStyle = "#d0e7f9";
                canvas2d.fillRect(0, 0, canvas.width, canvas.height);
                canvas2d.fill();
            }
            //定义圆圈数组和个数
            var circleNum = 20, circles = [];
            //生成圆基本参数
            for (var i = 0; i < circleNum; i++) {
                //圆的位置x,y ,radius,alpha
                circles.push([Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 60, Math.random() / 2]);
            }
            //绘制
            var DrawCircles = function () {
                for (var i = 0; i < circleNum; i++) {
                    canvas2d.fillStyle = 'rgba(200,200,200,' + circles[i][3] + ')';
                    canvas2d.beginPath();
                    canvas2d.arc(circles[i][0], circles[i][1], circles[i][2], Math.PI * 2, false);
                    canvas2d.closePath();
                    canvas2d.fill();
                }

            }
            //移动算法|重设圆的参数
            var movecilcles = function (cloud) {
                for (var i = 0; i < circleNum; i++) {//超出屏幕
                    if (circles[i][1] - circles[i][2] > canvas.height) {
                        circles[i][2] = Math.random() * 60;//半径随机
                        circles[i][1] = 0 - circles[i][2];
                        circles[i][3] = Math.random() / 2;
                    } else//该圆正在屏幕中
                    {
                        circles[i][0] += Number.parseInt(Math.random() * 3)*(Math.random()*2>1?-1:1);
                        circles[i][1] += cloud;
                    }
                }
            }
            //运行
            var run = function () {
                clear();
                movecilcles(3);
                DrawCircles();
            };
            setInterval(run, 30);
        })();

    </script>
</body>
</html>