什么是Canvas

最新推荐文章于 2024-05-29 11:16:42 发布

华惜

最新推荐文章于 2024-05-29 11:16:42 发布

阅读量2.6k

点赞数 1

文章标签： canvas html

本文链接：https://blog.csdn.net/weixin_44966759/article/details/108655037

版权

Canvas基本用法

什么是Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，可以控制其每一像素。
canvas是拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

基本用法

<canvas>标签只有两个属性 – width 和 height,所以在低版本的浏览器是不支持的,要在浏览器中写上 :

<canvas id="tutorial" width="150" height="150">浏览器版本不支持</canvas>

<canvas>在没有设置宽高的时候,默认初始化为 :

<canvas width='300px' height='150px'></canvas>

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持及其属性和方法。

**注释：**Internet Explorer 8 以及更早的版本不支持元素。

颜色、样式和阴影

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影距形状的水平距离
shadowOffsetY	设置或返回阴影距形状的垂直距离

方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）
createPattern()	在指定的方向上重复指定的元素
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）
addColorStop()	规定渐变对象中的颜色和停止位置

临摹canvas小案例

效果图：

在这里插入图片描述

代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>临摹canvas小案例</title>
</head>
 
<body>
    <canvas id="canvas" width="1000" height="1000" style="background: #000">您的浏览器不支持</canvas>
    <script>
        var cxt = document.getElementById('canvas').getContext('2d');//设置2d环境
        //轨道
        function drawTrack() {
            for (var i = 0; i < 8; i++) {
                cxt.beginPath();
                cxt.arc(500, 500, 50 * (i + 1), 0, 360, false);
                cxt.closePath();
                cxt.strokeStyle = "#fff";
                cxt.stroke();
            }
        }
        //drawTrack();
        //星球
        function drawStar(x, y, radius, startColor, endColor, cycle) {
            //星球的坐标点、半径、颜色（开始、结束）、公转周期
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.startColor = startColor;
            this.endColor = endColor;
            this.cycle = cycle;
            //渐变颜色空对象
            this.color = null;
 
            this.time = 0;//设置一个计时器
 
            this.draw = function () {
                cxt.save();
                cxt.translate(500, 500);
                cxt.rotate(this.time * (360 / this.cycle) * Math.PI / 180);
                cxt.beginPath();
                cxt.arc(this.x, this.y, this.radius, 0, 360, false);
                cxt.closePath();
 
                this.color = cxt.createRadialGradient(this.x, this.y, 0, this.x,
						this.y, this.radius);//径向渐变
                this.color.addColorStop(0, this.startColor);
                this.color.addColorStop(1, this.endColor);
                cxt.fillStyle = this.color;
                cxt.fill();
                cxt.restore();
 
                this.time += 1;
            }
        }
        //创建一个太阳对象的构造函数
        function Sun() {
            //第一个参数是this,从第二个参数开始才是drawStar方法的参数
            drawStar.call(this, 0, 0, 20, "#f60", "#f90", 0);
        }
        //水星
        function Mercury() {
            drawStar.call(this, 0, -50, 10, "#a69697", "#5c3e40", 87.7);
        }
        //金星
        function Venus() {
            drawStar.call(this, 0, -100, 10, "#c4bbac", "#1f1315", 224.701);
        }
        //地球
        function Earth() {
            drawStar.call(this, 0, -150, 10, "#78B1E8", "#050C12", 365.2422);
        }
        //火星
        function Mars() {
            drawStar.call(this, 0, -200, 10, "#CEC9B6", "#76422D", 686.98);
        }
        //木星
        function Jupiter() {
            drawStar.call(this, 0, -250, 10, "#C0A48E", "#322222", 4332.589);
        }
        //土星
        function Saturn() {
            drawStar.call(this, 0, -300, 10, "#F7F9E3", "#5C4533", 10759.5);
        }
        //天王星
        function Uranus() {
            drawStar.call(this, 0, -350, 10, "#A7E1E5", "#19243A", 30799.095);
        }
        //海王星
        function Neptune() {
            drawStar.call(this, 0, -400, 10, "#0661B2", "#1E3B73", 164.8 * 365);
        }
        var sun = new Sun();
        var mercury = new Mercury();
        var venus = new Venus();
        var earth = new Earth();
        var mars = new Mars();
        var jupiter = new Jupiter();
        var saturn = new Saturn();
        var uranus = new Uranus();
        var neptune = new Neptune();
        function drawAll() {
            cxt.clearRect(0, 0, 1000, 1000);
            //先画轨道
            drawTrack();
            //画行星
            sun.draw();
            mercury.draw();
            venus.draw();
            earth.draw();
            mars.draw();
            jupiter.draw();
            saturn.draw();
            uranus.draw();
            neptune.draw();
        }
        setInterval(drawAll, 10);
    </script>
</body>
</html>

华惜

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
什么是Canvas

Canvas基本用法什么是CanvasHTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas是拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。基本用法<canvas>标签只有两个属性 – width 和 height,所以在低版本的浏览器是不支持的,要在浏览器中写上 :<canvas id="tutorial" width="150" height="150">浏览器版本不支持&lt
复制链接

扫一扫