canvas入门

最新推荐文章于 2024-06-25 14:47:13 发布

thankYou_2018

最新推荐文章于 2024-06-25 14:47:13 发布

阅读量195

点赞数

分类专栏： myDream

本文链接：https://blog.csdn.net/thankYou_2018/article/details/82841388

版权

myDream 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近在做自己网站首页的的时候，总想加一些酷炫的效果展示在首页，顺便接触一点新东西，想来想去，最后还是学习了canvas，这里写个博客算是记录自己这几天的学习成果，方便以后遗忘时查看。

canvas是什么？

点击这里了解什么是canvas

（分享一些运用了canvas的网站）：
http://i-remember.fr/en/
https://www.html5tricks.com/
看了这些网站之后，毫不犹豫的开始入门canvas这个标签。

直接开始：

1，和其他标签一样的写法，先定义自己的画布标签。其中的属性width和height直接在属性里面写（了解更多为什么：https://www.cnblogs.com/JamKong/p/4987163.html）

<canvas id="aaa" width="300" height="300"></canvas>

2，主要在js里面绘图：

getContext方法返回一个用于在画布上绘图的环境(当前能使用的为“2d”)。

$(document).ready(function() {
    var canvas = document.getElementById('aaa');
          if(!canvas.getContext) return;
          var ctx = canvas.getContext("2d");
})

fillStyle属性设置或返回用于填充绘画的颜色、渐变或模式。

ctx.fillStyle="#0000ff";

（1），createLinearGradient(x0,y0,x1,y1); //渐变
x0：渐变开始的x轴位置
y0：渐变开始的y轴位置
x1：渐变结束的x轴位置
y1：渐变结束的y轴位置

var a=ctx.createLinearGradient(0,0,0,170);
a.addColorStop(0,"black");
a.addColorStop(1,"white");
ctx.fillStyle=a;

（2），createPattern(image,“repeat|repeat-x|repeat-y|no-repeat”);
//方法在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他元素。
image 规定要使用的图片、画布或视频元素。
repeat 默认。该模式在水平和垂直方向重复。
repeat-x 该模式只在水平方向重复。
repeat-y 该模式只在垂直方向重复。
no-repeat 该模式只显示一次（不重复）。

var img=document.getElementById("lamp");
var b=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=b;
ctx.fill();

fillRect 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
context.fillRect(x,y,width,height);
x 矩形左上角的 x 坐标
y 矩形左上角的 y 坐标
width 矩形的宽度，以像素计
height 矩形的高度，以像素计

ctx.fillRect(20,20,150,100);

完整的写个简单的canvas代码

<html>
<head>
    <title>Canvas tutorial</title>
    <style type="text/css">
        #aaa {
            border: 1px solid red;
        }
    </style>
</head>
<canvas id="aaa" width="100" height="100"></canvas>
</body>
<script type="text/javascript">
    $(document).ready(function() {
    var canvas = document.getElementById('aaa');
         if(!canvas.getContext) return;
         var ctx = canvas.getContext("2d");
         ctx.fillStyle = "rgb(200,0,0)";
         ctx.fillRect (10, 10, 55, 50);
         ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
         ctx.fillRect (30, 30, 55, 50);
})
</script>
</html>

结束：canvas有很多语法，用法，可以在博客或者教程上找到很多很详细。熟能生巧
注意：复杂图形可以采用构造函数等思想以及定时器等工具进行编程。

附赠：
在这里插入图片描述

记录（自己的js代码，放博客方便日后查看）


    $(document).ready(function() {
        var space = document.getElementById("fire");
        var ctx = space.getContext("2d");

        var particles = [];
        var particle_count = 150;
        for(var i = 0; i < particle_count; i++) {
            particles.push(new particle());
        }
        var canvasWidth = 200;
        var canvasHeight = 200;
        $("#fire").css({
            width: canvasWidth,
            height: canvasHeight
        });
        window.requestAnimFrame = (function() {
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
                window.setTimeout(callback, 6000 / 60);
            };
        })();

        function particle() {
            this.speed = {
                x: -1 + Math.random() * 2,
                y: -1 + Math.random() * 2
            };
            canvasWidth = (document.getElementById("fire").width);
            canvasHeight = (document.getElementById("fire").height);

            //圆心坐标(myX,myY)
            let myX=(canvasWidth)/2;
            let myY=(canvasWidth)/2;
            //圆半径myR
            let myR=60;
            let circleX=myX + Math.sin(2*Math.PI /Math.random()*360) * myR;
            let circleY=myY + Math.cos(2*Math.PI /360) * myR;
            this.location = {
                // x: canvasWidth / 2,
                // y: (canvasHeight / 2) + 35
                x: circleX,
                y: circleY
            };
            this.radius = 0.5 + Math.random() * 1;
            this.life = 10 + Math.random() * 10;
            this.death = this.life;
            this.r = 255;
            this.b = 0;
            this.g = Math.round(Math.random() * 52);
        }

        function ParticleAnimation() {
            ctx.globalCompositeOperation = "source-over";
            ctx.fillStyle = "rgb(36,36,36)";
            ctx.fillRect(0, 0, canvasWidth, canvasHeight);
            ctx.globalCompositeOperation = "lighter";
            for(var i = 0; i < particles.length; i++) {
                var p = particles[i];
                ctx.beginPath();
                p.opacity = Math.round(p.death / p.life * 100) / 100
                var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
                gradient.addColorStop(0, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.opacity + ")");
                gradient.addColorStop(0.5, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.opacity + ")");
                gradient.addColorStop(1, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", 0)");
                ctx.fillStyle = gradient;
                ctx.arc(160,150,80,0,2*Math.PI);
                ctx.fill();
                p.death--;
                p.radius++;
                p.location.x += (p.speed.x);
                p.location.y += (p.speed.y);
                if(p.death < 0 || p.radius < 0) {
                    particles[i] = new particle();
                }
            }
            requestAnimFrame(ParticleAnimation);
        }
        ParticleAnimation();
    });

代码随记：最后总想要一个画布为圆形的操作，在我js里面又操作了不断循环填充，网上看了很多方法都不管用。
解决办法：最后采用css，不使用canvas操作自己，把canvas放在一个圆形的box里面，box的css设置overflow: hidden;

thankYou_2018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas入门

最近在做自己网站首页的的时候，总想加一些酷炫的效果展示在首页，顺便接触一点新东西，想来想去，最后还是学习了canvas，这里写个博客算是记录自己这几天的学习成果，方便以后遗忘时查看。canvas是什么？点击这里了解什么是canvas餐前酒（分享一些运用了canvas的网站）：http://i-remember.fr/en/https://www.html5tricks.com/看了这些...
复制链接

扫一扫