canvas学习（一）canvas宽高异常，fillStyle的使用，demo：黑客帝国代码雨plus

最新推荐文章于 2024-08-16 13:20:36 发布

原创最新推荐文章于 2024-08-16 13:20:36 发布 · 693 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #css #html #canvas #css3

本文通过一个简单示例，介绍了HTML5 Canvas的基本属性和使用方法，包括如何设置宽高、填充样式以及文本渲染。并通过对比属性设置与CSS设置的影响，深入解析了Canvas的工作原理。

首先一个小demo,来说明一下canvas简单的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
	</head>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
	var c=document.getElementById("myCanvas");//获取canvas元素
	var ctx=c.getContext("2d");//创建context对象，2d代表平面绘图
	ctx.fillStyle="#000";
	ctx.fillRect(20,20,200,100);//fillReact定义填充方式，四个参数（x,y,width,height）,前两个坐标，后两个宽高
	ctx.fillStyle="green"
	ctx.font="30px arial"
	ctx.fillText("Hello World",20,20)
	ctx.fillStyle="red"
	ctx.font="20px arial"
	ctx.fillText("世界",40,40)
</script>

</body>
</html>

demo效果如下：
在这里插入图片描述

一、canvas的height、width设置

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

可以看到，height和width时直接作为标签的属性设置的，那么用css设置可以吗？
我们来看下可行否，首先用属性的方式将canvas的宽高都变成原来的2倍

<canvas id="myCanvas" width="600" height="300" style="border:1px solid #d3d3d3;">

效果如下，可以看到使用属性改变宽高的时候，只有canvas的宽高改变了，里面的内容没有发生变化
在这里插入图片描述
使用css样式呢？

<canvas id="myCanvas"style="width:600px;height:300px;border:1px solid #d3d3d3;">

可以看到canvas包括内容在内宽高都变成了之前的两倍
在这里插入图片描述
总结：打个比方，将canvas比作一个浏览器窗口吧，直接用属性的方式来改变宽高，就好似用鼠标拖动浏览器的边缘来调控浏览器窗口的大小，其内容大小并不会改变，但是如果用css的方式来改变宽高，就好似按住ctrl然后滚动鼠标滚轮来放大缩小，类似放大镜。

二、fillStyle

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）
当canvas使用fillstyle属性时，只会作用于其之后绘制的元素上，直至遇到下一个fillstyle终止，比如上述Demo中,总共有设置了三次fillStyle，但是样式并没有相互覆盖，只是各自渲染了一块样式

	ctx.fillStyle="#000";
	ctx.fillRect(20,20,200,100);//fillReact定义填充方式，四个参数（x,y,width,height）,前两个坐标，后两个宽高
	ctx.fillStyle="green"
	ctx.font="30px arial"
	ctx.fillText("Hello World",20,20)
	ctx.fillStyle="red"
	ctx.font="20px arial"
	ctx.fillText("世界",40,40)

以上内容只是个人理解，如有不对，欢迎指正
最后附上代码雨Demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑客帝国</title>
</head>
<style type="text/css">
    body{
        margin: 0;
        padding: 0; 
        overflow: hidden;
    }
    #content{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 500px;
        height: 500px;
        background-color: rgba(156,234,2,0.2);
        color:greenyellow;
        opacity: 0.3;
    }
    
</style>
<body>
    <canvas id="canvas" style="background-color: black;" ></canvas>
    <div id="content">
        hahaha~
    </div>
</body>
<script type="text/javascript">
    window.onload = ()=>{
        let canvas = document.getElementById("canvas")
        let context = canvas.getContext("2d");
        let w = window.innerWidth;
        let h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;
        let fontSize = 15;
        let columns = Math.floor(w/fontSize);//按照屏幕宽度划分出列的个数
        let drops = [];//记录每列文字的y坐标
        // 初始化每一列的位置
        for(var i = 0;i<columns;i++){
            drops.push(0)
        }
        let str = "0123456789abcdefghigklmnopqrstuvwxyz"
        const draw = ()=>{
            //背景
            context.fillStyle = "rgba(0,0,0,0.05)";
            context.fillRect(0,0,w,h)//绘制画布
            context.fillStyle="green"
            context.font = fontSize+"px arial"//设置字体样式
            for(let i=0;i<columns;i++){
                let index = Math.floor(Math.random()*str.length)
                let x = i*fontSize;
                let y = drops[i]*fontSize
                context.fillText(str[index],x,y)
                if(y >= canvas.height && Math.random() > 0.92 ){
                    drops[i] = 0
                }
                drops[i]++
            }
        };
        draw();
        setInterval(draw,33)
        
        //下面的是自动打字
        let content = document.getElementById("content")
        let str2 = "今天是2020年8月24日，距离‘9821事件’刚好30年，这段尘封的往事终于要重新出现在世人面前，激起他们埋藏于心底最不愿意回想起的记忆..."
        let j=0;
        const autoTyping=()=>{
            if(j>str2.length){
                content.innerHTML=str2
            }else{
                content.innerHTML=str2.slice(0,j++)+"_"
                setTimeout(autoTyping,300)
            }
        }
        autoTyping()
    }
</script>
</html>