使用canvas绘制渐变色矩形和使用按键控制人物移动

简介: 使用canvas绘制渐变色矩形和使用按键控制人物移动1.使用canvas绘制渐变色矩形效果演示image.png相关代码: Title canvas { border: 1px solid #ccc; }/* .

使用canvas绘制渐变色矩形和使用按键控制人物移动

1.使用canvas绘制渐变色矩形

效果演示
img_a9445a36bdf404b33cebf51f7fd9607f.png
image.png
相关代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
/*        .linearGradient{
            width: 400px;
            height: 100px;
            background-image: linear-gradient(to right,pink,blue);
        }*/
    </style>
</head>
<body>
<div class="linearGradient"></div>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*fillStyle 'pink' '#000' 'rgb()' 'rgba()' */
    /*也可以使用一个渐变的方案了填充矩形*/
    /*创建一个渐变的方案*/
    /*渐变是由长度的*/
    /*x0y0 起始点 x1y1 结束点  确定长度和方向*/
    var linearGradient = ctx.createLinearGradient(100,100,500,400);
    linearGradient.addColorStop(0,'pink');
    //linearGradient.addColorStop(0.5,'red');
    linearGradient.addColorStop(1,'blue');

    ctx.fillStyle = linearGradient;

    ctx.fillRect(100,100,400,100);

    /*pink---->blue*/
    /*回想线性渐变---->要素 方向  起始颜色 结束颜色 */
    /*通过两个点的坐标可以控制 渐变方向*/
</script>
</body>
</html>

2.使用按键控制人物移动

效果演示:
img_e8cba4a7f9a9dd865fdd6882f7ae9acf.gif
GIF.gif
相关代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>

    var Person = function (ctx) {
        /*绘制工具*/
        this.ctx = ctx || document.querySelector('canvas').getContext('2d');
        /*图片路径*/
        this.src = 'image/04.png';
        /*画布的大小*/
        this.canvasWidth = this.ctx.canvas.width;
        this.canvasHeight = this.ctx.canvas.height;

        /*行走相关参数*/
        this.stepSzie = 10;
        /* 0 前  1 左  2 右  3 后  和图片的行数包含的图片对应上*/
        this.direction = 0;
        /*x轴方向的偏移步数*/
        this.stepX = 0;
        /*y轴方向的偏移步数*/
        this.stepY = 0;

        /*初始化方法*/
        this.init();
    };

    Person.prototype.init = function () {
        var that = this;
        /*1.加载图片*/
        this.loadImage(function (image) {
            /*图片的大小*/
            that.imageWidth = image.width;
            that.imageHeight = image.height;
            /*人物的大小*/
            that.personWidth = that.imageWidth / 4;
            that.personHeight = that.imageHeight / 4;
            /*绘制图片的起点*/
            that.x0 = that.canvasWidth / 2 - that.personWidth / 2;
            that.y0 = that.canvasHeight / 2 - that.personHeight / 2;
            /*2.默认绘制在中心位置正面朝外*/
            that.ctx.drawImage(image,
                0,0,
                that.personWidth,that.personHeight,
                that.x0,that.y0,
                that.personWidth,that.personHeight);

            /*3.能通过方向键去控制人物行走*/
            that.index = 0;
            document.onkeydown = function (e) {
                if(e.keyCode == 40){
                    that.direction = 0;
                    that.stepY ++;
                    that.drawImage(image);
                    /*前*/
                }else if(e.keyCode == 37){
                    that.direction = 1;
                    that.stepX --;
                    that.drawImage(image);
                    /*左*/
                }else if(e.keyCode == 39){
                    that.direction = 2;
                    that.stepX ++;
                    that.drawImage(image);
                    /*右*/
                }else if(e.keyCode == 38){
                    that.direction = 3;
                    that.stepY --;
                    that.drawImage(image);
                    /*后*/
                }
            }
        });
    }
    /*加载图片*/
    Person.prototype.loadImage = function (callback) {
        var image = new Image();
        image.onload = function () {
            callback && callback(image);
        };
        image.src = this.src;
    };
    /*绘制图片*/
    Person.prototype.drawImage = function (image) {
        this.index ++;
        /*清除画布*/
        this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);
        /*绘图*/
        /*在精灵图上的定位 x  索引*/
        /*在精灵图上的定位 y  方向*/
        this.ctx.drawImage(image,
            this.index * this.personWidth,this.direction * this.personHeight,
            this.personWidth,this.personHeight,
            this.x0 + this.stepX * this.stepSzie ,this.y0 + this.stepY * this.stepSzie,
            this.personWidth,this.personHeight);
        /*如果索引超出了 变成0*/
        if(this.index >= 3){
            this.index = 0;
        }
    };


    new Person();

</script>
</body>
</html>
相关文章
|
3月前
|
Web App开发 前端开发
canvas详解02-样式和颜色控制
canvas详解02-样式和颜色控制
41 1
|
3月前
|
计算机视觉 Python
OpenCV中绘制文字和运动的小球动画
要在OpenCV中绘制文字和运动的小球动画,可以使用以下方法: 1. 导入所需库:
56 8
|
5月前
cesium中绘制立方体、设置材质、操作相机及获取鼠标经纬度和高度的方法
cesium中绘制立方体、设置材质、操作相机及获取鼠标经纬度和高度的方法
56 0
|
10月前
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
85 0
|
C# 图形学
C#之深入理解GDI+绘制圆弧及圆角矩形等比缩放的绘制
GDI+中对于圆弧的绘制,是以给定的长方形(Rectangle`结构)为边界绘制的椭圆的一部分形成的圆弧。绘制的圆弧的中心为长方形内切椭圆的圆心(如果是正方形,则正方形的...
377 0
C#之深入理解GDI+绘制圆弧及圆角矩形等比缩放的绘制
|
前端开发 JavaScript
canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备
canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备
700 0
canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备
|
Web App开发 移动开发 前端开发
H5:画布Canvas基础知识讲解(三)之文字、阴影、颜色渐变
​上一节介绍了H5:画布Canvas基础知识讲解(二)之插入图像、像素级操作,接下来继续讲解H5:画布Canvas基础。
SwiftUI—通过Path路径绘制不规则的线条和图形
SwiftUI—通过Path路径绘制不规则的线条和图形
497 0
SwiftUI—通过Path路径绘制不规则的线条和图形
|
移动开发 缓存 前端开发
H5画布 canvas(二)绘制文字、图片、坐标系,canvas颜色和样式,canvas绘制环境
H5画布 canvas(二)绘制文字、图片、坐标系,canvas颜色和样式,canvas绘制环境
500 0
H5画布 canvas(二)绘制文字、图片、坐标系,canvas颜色和样式,canvas绘制环境
|
前端开发 JavaScript 内存技术
css动画animation绘制向四周扩散的圆圈
css动画animation绘制向四周扩散的圆圈
1287 0

相关产品

  • 云迁移中心