![](https://img-blog.csdnimg.cn/20210312225111603.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
canvas
canvas
敢问
书山有路勤为径,学海无涯苦作舟
展开
-
canvas-flappy bird
一、利用中介者模式进行业务搭建Game是游戏中介者类,它的作用就是中介者的作用 Bird小鸟类,作用是对小鸟的业务进行封装 Land大地类,封装地面的样式 Background背景类,作用是封装背景图 PiPe管子类,作用是随机出现管子二、Game类(function () { window.Game = function () { //获取画布设置上下文 this.canvas = document.querySelector("canvas")原创 2020-12-15 21:34:02 · 112 阅读 · 0 评论 -
canvas-旋转变形
canvas可以变形,单变形的不是元素,二十ctx,ctx是整个画布的渲染区域,整个画布在变形。所以需要在画布变形前,进行保存和恢复save()保存画布的所有状态restore()恢复画布的状态save 和 restore 方法是用来保存和恢复 canvas 状态的,都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。可能保存的状态有:当前应用的变形(即移动,旋转和缩放,见下)以及下面这些属性:strokeStyle, fillStyle, globalAlpha原创 2020-12-14 22:09:13 · 414 阅读 · 0 评论 -
canvas-刮刮乐中大奖
canvas文档canvas的合成属性合成其实就是常见的蒙板状态,本质就是如何进行压盖,如何进行显示可以通过globalCompositeOperation来设置压盖顺序比如我们此时画了一个方和一个圆,第一次画的是方,第二次画的是圆,所以会出现圆压盖方的现象ctx.globalCompositeOperation = type; 默认-source-over source-in source-...原创 2020-12-14 21:09:13 · 122 阅读 · 0 评论 -
canvas -资源管理
在开发游戏的时候,有一些静态资源是需要请求回来的,否则如果直接开始,某些静态资源没有,会报错,或者空白,比如我们的游戏背景图,如果没有请求回来就直接开始,页面会有空白现象 资源管理器就是当游戏需要资源全部加装完毕的时候,再开始游戏 现在主要是图片的资源,所以我们要在canvas渲染过程中进行对图片的资源加载获取对象中属性的长度this.R = { "one": "images/17kongqiao.jpg", "two": "ima原创 2020-12-14 14:03:11 · 196 阅读 · 1 评论 -
canvas-图片的渲染
<canvas width="1000" height="600" id="mycanvs"></canvas> <script> var canvas = document.querySelector("canvas"); var ctx = canvas.getContext("2d"); //创建图片 var image = new Image(); //设置图片地址...原创 2020-12-14 10:43:59 · 2847 阅读 · 0 评论 -
canvas-绘制功能
中文文档1、绘制矩形<script> //获取dom var canvas = document.getElementById("mycanvas"); //获取上下文 var ctx = canvas.getContext("2d"); //设置颜色 ctx.fillStyle = "blue"; //填充矩形 ctx.fillRect(100,100,10原创 2020-12-13 20:27:17 · 374 阅读 · 0 评论 -
canvas-小球回弹连线
<style> *{margin: 0;padding: 0;} canvas{ display: block;margin: 10px auto;border: 1px solid #333;}</style><body> <canvas id="mycanvas"></canvas> <script> var canvas = document.getElementByI.原创 2020-12-13 18:44:10 · 168 阅读 · 0 评论 -
canvas - 炫彩小球
<style> *{ margin: 0; padding: 0; } canvas { border: 1px solid #333; display: block; margin: 20px auto 0; }</style><body> <canvas width="1200" height="800" id="mycanvas">.原创 2020-12-13 12:13:50 · 185 阅读 · 0 评论 -
canvas-基本使用和动画原理
1、canvas 绘图1、canvas简介:web上的动画都是Flash。比如动画广告、游戏等等,基本上都是Flash实现的。Flash是有缺点的,比如需要安装Adobe Flash Player,漏洞多,重量比较大。卡顿和不流畅等等。HTML5提出了一个新的canvas标签,彻底颠覆了Flas 的主导地位。无论是广告、游戏都可以使用canvas实现了,Canvas是一个轻量级的画布,我们使用Canvas进行JavaScript的编程,不需要增加额外的插件,性能也很好,不卡顿,在手机中也很流畅2、c原创 2020-12-12 13:20:46 · 1765 阅读 · 0 评论