canvas | 易学教程

Phaser.js开发-星星狗游戏(上)

阅读更多关于 Phaser.js开发-星星狗游戏(上)

星星狗PS(个人兴趣爱好，不是游戏开发专业，不喜勿喷)，转载请命名出处： http://my.oschina.net/8946a/blog/edit/738388 试玩下载地址： http://git.oschina.net/8946a/star_dog 简单介绍下写的小玩意儿，游戏世界有碰撞，刚体，摩擦，重力，阻力，速度，加速度，分数统计等，操作简单，玩家控制单身狗键盘可以上下左右控制，吃星星+10分，吃钻石+20分，碰撞到敌人时候会死亡。就像这样。。。。我是故意碰到敌人的，为了给大家演示结果、当吃掉所有的星星与钻石会这样麻雀虽小，五脏俱全，今天就跟大家一起聊聊这个游戏是怎么写的具体怎么搭建环境，我就不墨迹了。在上个博客“开发愤怒的小鸟里面有提到” 直接上代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>星星狗</title> <script src="js/phaser.min

SVG gradient color

阅读更多关于 SVG gradient color

问题 Hi I'm working with SVG here I trying to add the gradient to SVG like this white and grey gradient but I unable to achieve the desired output. Can anyone point me in the right direction. <svg viewBox="0 0 400 400"> <defs> <linearGradient id="GradientRepeat" x1="0" y1="1" x2="0" y2="0" spreadMethod="repeat"> <stop offset="0.05" stop-color="#fff" stop-opacity="0"/> <stop offset="1" stop-color="#777" stop-opacity="1"/> </linearGradient> </defs> <circle class="sub-menu-circle" cx="0" cy="200" r=

canvas 星空特效

阅读更多关于 canvas 星空特效

阿里云图标首页背景–星空特效效果代码 <html> <canvas id="_bgcanvas" style="position: fixed;z-index:-1"></canvas> <script> /** * * @param {string} element canvas 元素 * @param {int} width 宽 * @param {int} height 高 */ function xingkong (element, width, height) { var canvas = document.querySelector(element); var w = width ||document.documentElement.clientWidth; var h = height || document.documentElement.clientHeight; canvas.width = w, canvas.height = h; var context = canvas.getContext("2d"); // 背景 context.fillStyle = "#090723"; context.fillRect(0, 0, w, h); for (var l = [], r = 0; r < h; r += 4){ l.push(new t({ x:

Android有用代码片段（四）

阅读更多关于 Android有用代码片段（四）

不知不觉中，就收集了超过60条的自己感觉有意思的代码片段，分为三篇文章： android有用代码片段、 Android有用代码片段（二）、 Android有用代码片段（三）这三篇，今天，开始第四篇的整理！六十一、Android创建桌面快捷方式： [java] view plain copy print ? /** * 为程序创建桌面快捷方式 */ private void addShortcut(){ Intent shortcut = new Intent( "com.android.launcher.action.INSTALL_SHORTCUT" ); //快捷方式的名称 shortcut.putExtra(Intent.EXTRA_SHORTCUT_NAME, getString(R.string.app_name)); shortcut.putExtra( "duplicate" , false ); //不允许重复创建 //指定当前的Activity为快捷方式启动的对象: 如 com.everest.video.VideoPlayer //注意: ComponentName的第二个参数必须加上点号(.)，否则快捷方式无法启动相应程序 ComponentName comp = new ComponentName( this .getPackageName(), "

PHP中的HTML5应用将Canvas图像保存到服务器

阅读更多关于 PHP中的HTML5应用将Canvas图像保存到服务器

在几年前 HTML5 还没有流行的时候，我们的项目经理曾经向我提出这样一个需求：让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名。这需要我们评审软件里提供这样一个功能：打开浏览器，登录，进入评审意见页，页面最下部有个方块区域，用户在这里用触摸笔进行签名，然后这个签名将会保持的服务器上。这样的一个需求在当时是让我大费周折，但如今想起来，如果用html5的canvas实现，真是太简单了。在《将画布(canvas)图像保存成本地图片的方法》这篇文章里就有一个只用了几行代码就实现了的画板功能——很简单，虽然有一个小bug——但完全能当作签名用。我之前说了很多如何将canvas图像保存成图片并下载的方法，但这些方法都是将图片保存到客户端，而我们的签名需求是需要将canvas的内容保存到服务器端，如何实现？其实很简单，看完下面的这段PHP代码，相信你也会觉得很简单。 <?php // requires php5 define('UPLOAD_DIR', 'images/'); $img = $_POST['img']; $img = str_replace('data:image/png;base64,', '', $img); $img = str_replace(' ', '+', $img); $data = base64_decode($img); $file =

Javascript canvas not redrawing?

阅读更多关于 Javascript canvas not redrawing?

问题 I'm working on a game (canvas-based), and I've run into a problem. Apparently, when I press a key, instead of the canvas updating the x and y of the object, it's just doing nothing. The variable itsself is updating, but the object on screen is not. Here's the code: var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = 640; canvas.height = 480; document.body.appendChild(canvas); var bluex = 560; var bluey = 380; var orangex = 20; var orangey = 380;

Angular 5 with Canvas drawImage not showing up

阅读更多关于 Angular 5 with Canvas drawImage not showing up

问题 Trying to add a background image to canvas using drawImage and it's not showing up. I know the path to the image is correct because I can do <img src="{{ imageName }}" /> and that works. Everything else works fine in JavaScript but doesn't translate well to Angular. HTML: <canvas #canvas></canvas> TypeScript: import { Component, OnInit } from '@angular/core'; ... @Component({ selector: 'app-box-picker', templateUrl: './box-picker.component.html', styleUrls: ['./box-picker.component.css'] })

canvas压缩图片，转换图片格式，图片去色

阅读更多关于 canvas压缩图片，转换图片格式，图片去色

本文参考自 Canvas API 和张鑫旭的 canvas实现图片背景色去色变透明及 HTML5 file API加canvas实现图片前端JS压缩并上传。根据实际需要修改而成。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style> #originalCanvas { cursor: crosshair; } .resultCanvas { position: relative; max-width: 300px; max-height: 300px; background: url("bg.png"); } li { border: 1px solid #f0f; margin-bottom: -1px; } img { display: inline-block;

使用canvas在前端添加水印

阅读更多关于使用canvas在前端添加水印

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style> * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } body, html { position: relative; width: 100%; height: 100vh; margin: 0; padding: 0; font: 12px/1.5 Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; } input[type='text'] { width: 100%; height: 24px; /*-webkit-box-shadow: 0

Android Canvas的save(),saveLayer()和restore()浅谈

阅读更多关于 Android Canvas的save(),saveLayer()和restore()浅谈

save() saveLayer() restore() 1. 在自定义控件当中你onMeasure和onLayout的工作做完成以后就该绘制该控件了，有时候需要自己在控件上添加一些修饰来满足需求复写onDraw(Canvas canvas),其中Canvas就像是一块画布，你自定义控件的样式就是在它上面完成的。 Canvas ，Paint等基本概念就不赘述了。 2. 下面就直接用demo来解释标题列出的方法先介绍save()和必须了解的相关知识：http://www.cnblogs.com/liangstudyhome/p/4126002.html save() : 用来保存 Canvas 的状态, save()方法之后的代码，可以调用 Canvas 的平移、放缩、旋转、裁剪等操作！ restore() ：用来恢复 Canvas 之前保存的状态( 可以想成是保存坐标轴的状态 ),防止 save()方法代码之后对 Canvas 执行的操作，继续对后续的绘制会产生影响，通过该方法可以避免连带的影响通过一个例子说明一下：例如：我们想在画布上绘制一个向右的三角箭头，当然，我们可以直接绘制，另外，我们也可以先把画布旋转 90 °，画一个向上的箭头，然后再旋转回来（这种旋转操作对于画圆周上的标记非常有用），最后，我们在右下角绘一个 20 像素的圆！

订阅 canvas