canvas记录

来源：互联网发布：人工智能的电影编辑：程序博客网时间：2024/05/29 08:50

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>

0 0