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

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

效果演示

相关代码:
<!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.使用按键控制人物移动

效果演示:

相关代码:
<!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>

使用canvas绘制渐变色矩形和使用按键控制人物移动的更多相关文章

  1. 小程序canvas绘制渐变色（简单入门）

    呀,曾经的我是那么的单纯,天真,粗略的翻了一遍小程序画布API,没有看见渐变色,就以为不支持渐变色 于是在项目中直接把原本的渐变色换成了单一颜色展示,发现很low啊 但是,自从上次小程序API文档更新 ...

  2. HTML5 在canvas绘制一个矩形

    笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...

  3. WPF使用Canvas绘制可变矩形

    1.问题以及解决办法 最近因为项目需要,需要实现一个位置校对的功能,大致的需求如下:有一个图片,有一些位置信息,但是位置信息可能和实际有些偏差,需要做简单调整,后面会对这张图片进行切割等,做些处理.( ...

  4. canvas 绘制圆角矩形

    <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</ ...

  5. Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果

    绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...

  6. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

  7. canvas绘制矩形

    canvas绘制矩形 方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...

  8. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  9. h5学习-canvas绘制矩形、圆形、文字、动画

    绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

随机推荐

  1. delete千万级别大表中的某部分数据

    如果表很大--千万级别的数据,又不能做truncate 操作,只能 delete 表中某部分数据时可以用以下来执行,这种方式只对大表操作时比较有效率,数据量小时不考虑 --示例如下 declare c ...

  2. WPF MediaKit的一点问题

    原版WPF MediaKit在捕获摄像头视频时,如果不使用640*480分分辨率输出,会出现NewVideoSample事件不被触发的问题. 经数日摸索,终于明白SetVideoCapturePara ...

  3. PrefixHeader.pch 在工程中的使用

    1)  新建一个pch文件 2) 在 工程 Build Settings 中搜索 header  将Precompile Prefix Header 置为YES 2) 选中pch文件, 将右侧相对路径 ...

  4. MySQL性能调优与架构设计——第 16 章 MySQL Cluster

    第 16 章 MySQL Cluster 前言: MySQL Cluster 是一个基于 NDB Cluster 存储引擎的完整的分布式数据库系统.不仅仅具有高可用性,而且可以自动切分数据,冗余数据等 ...

  5. Mongodb 存储日志信息

    线上运行的服务会产生大量的运行及访问日志,日志里会包含一些错误.警告.及用户行为等信息,通常服务会以文本的形式记录日志信息,这样可读性强,方便于日常定位问题,但当产生大量的日志之后,要想从大量日志里挖 ...

  6. poj1836 Alignment

    Alignment Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 11707   Accepted: 3730 Descri ...

  7. 安装及使用Eclipse Maven插件的经验

    Eclipse Maven插件的站点目前已经迁移到了Eclipse主站上:http://eclipse.org/m2e/ 其安装方法也非常简单,通过Eclipse访问下面的URL:http://dow ...

  8. java web 入门实例servlet篇（显示后台数据库列表，删除某一条记录并显示）

    编写过程中需要注意的问题: 1.建立eclipse动态web工程时,需要改写编译后class文件的位置,通常情况下是这个位置:/WebContent/WEB-INF/classes 2.配置的页面链接 ...

  9. Feed back TFS 2017 RC upgrade status to product team in product group 2017.03.01

    作为微软的MVP,有一个我最喜欢的好处,就是可以与产品组(产品研发部门)有零距离接触,可以最先拿到即将发版的产品,并且和产品组沟通,对产品中出现的问题实时反馈. 看到TFS产品组吸收了自己的建议和反馈 ...

  10. 使用ABP框架踩过的坑系列4

    数据库连接和事务管理,是数据库应用中的最重要概念之一.做过的人,都会头疼:何时Open一个连接?何时Start一个事务?何时Dispose这个连接?... ABP框架试图用一个叫做UnitOfWork ...