snowflake（canvas）

【snowflake（canvas）】的更多相关文章

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" charset="utf-8" /><title>漫天飞雪</title><style type="text/css"> * {margin: 0; padding: 0;} body {background: #26568E;} canvas {…

onDraw(canvas)和dispatchDraw（canvas）方法

绘制VIew本身的内容,通过调用View.onDraw(canvas)函数实现绘制自己的孩子通过dispatchDraw(canvas)实现 View组件的绘制会调用draw(Canvas canvas)方法,draw过程中主要是先画Drawable背景,对 drawable调用setBounds()然后是draw(Canvas c)方法.有点注意的是背景drawable的实际大小会影响view组件的大小,drawable的实际大小通过getIntrinsicWidth()和getIntrin…

使用HTML5画布（canvas）生成阴影效果

来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowcanvas'); var ctx = canvas.getContext('2d'); ctx.save(); ctx.fillStyle = '#EB852A'; ctx.shadowOffsetX = 15; // 阴影Y轴偏移 ctx.shadowOffsetY = 15; // 阴影X轴偏移…

在线生成二叉树（基于EaselJS（canvas））

学习二叉树的时候,老在本子上画二叉树好麻烦.其实就想看下树结构.最近html5蛮火的,就用canvas和EaselJS.js(开发flash公司开发的插件)插件实现了个.大家随便用吧. 这是个什么东西呢?其实就是你提供这样一串数组 30,25,19,37,35,40,39,34,22,42,36 输入到input控件中,点击按钮,在canvas生成二叉树画面. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&q…

（canvas）两小球碰撞后的速度问题研究

这两天在研究canvas碰撞先把小球开始运动的图拿出来参考了一下别的的代码,在两个小球碰撞处理上,我觉得不完善怎么样处理才算完善呢,当然是要用高中物理学的动量守恒了和机械能守恒了机械能守恒我其实忘了,特地百度了下用高中老师的话就是,联立,解得,PS:结果我是网上找的,也存在看错的可能碰撞的逻辑我来简要所以下 1.当小球撞到墙,对应的x轴或者y轴的速度成 -1,效果是反弹 2.当两个小球碰撞时,由上面的公式,我们会分别计算speedX和speedY 由于动量守恒,我们再效果图中能发现,…

HTML5笔记学习（canvas）

来源于<HTML5高级程序设计> css3圆角 border-radius旋转变换 transform:rotate(); 变换 transformation动画 animation过度 transition ------------html5 语义化 audio video canvas iframe h1 group button textarea短语 mark kbd sub suparticle aside title 新片段元素header footer section web页面中…

上传图片时压缩图片 - 前端（canvas）做法

HTML前端代码: <?php $this->layout('head'); ?> <?php $this->layout('sidebar'); ?> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type=…

JS压缩图片（canvas），返回base64码

上传图片时总会遇到图片过大上传不上去的问题,本方法是在网上搜的压缩图片的例子,我测试过了,确实能用,但是照搬别人的代码,发现压缩后图片会失真,不清晰,现经修改图片清晰度还可以,不仔细看差别不大,so,改了改 JS 返回的是一个base64字符串 /** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径 * @param {Object} obj * obj 对象有 width…

canvas动画——粒子系统（1）

这个动画在很早之前就见过,当时就没迷住了.最近在学canavs动画,动手实现了一下.代码在这里.展示效果在这里. 这属于粒子系统的一种,粒子系统就是需要管理一堆粒子嘛,动画实现的关键在于,遍历这些粒子,并更新它们的位置. 粒子每个粒子都需要包含自己的横纵坐标想x.y,半径r,各分量上的加速度ax.ay,速度vx.vy,还有所属的场景owner,这里的粒子加速度均为0. // 父类class Sprite { constructor(args={}) { this.x = args.x || 0…

《JavaScript高级程序设计》笔记：使用Canvas绘图（15）

基本用法要使用<canvas>元素,必须先设置其width和height属性,指定可以绘图的区域大小.出现在开始和结束标签中的内容是后备信息,如果浏览器不支持<canvas>元素,就会显示这些信息.如下例子: <canvas id="drawing" width="200" height="200"> A drawing of something.</canvas> 与其它元素一样,<can…