随笔分类 - canvas
摘要：【学海拾贝】是一个标签,用来记录我工作中碰到过的问题,在空闲时探索它的原因及原理 由来 2 年前我做 h5 项目的时候,遇到了上传图片的功能实现,于是就用了 `` 这个标签来实现图片的上传 当我点击标签,选择拍照的时候,发现出现的图片和拍照出来是不一样的,它的方向发生了旋转,这样就和拍照的样子不一样
阅读全文
摘要：前言:之前在网上看到了这个效果,之后我在做项目的时候,正好将他放进了项目里面,这篇博客就介绍一下该效果的原理; 1.首先是基础的设置 canvas 的大小是占据整个屏幕; 2.绘出字 typescript const str: string = '404'; ctx.textBaseline = '
阅读全文
摘要：前言:之前做过一个 snow 效果,但是是直接用 HTML 做的 点击此处查看 ,几个星期前,我用 typescript 和 canvas 重构了一下, snow效果是一个很简单的效果,但是用来练手还是不错的; 首先创建基本变量: 在获取 canvas 的 dom 时可能后报错,所以要用断言或者 这
阅读全文
摘要：以前就看到了这个东西,由于太忙了最近才有时间来实现这个; 该文章适合有一定 canvas 基础的人阅读; 首先说说他的原理: The construction of the Pythagoras tree begins with a square. Upon this square are cons
阅读全文
摘要：canvas 入门之作: 三步实现一个时钟: 直接上效果: step 1 : 背景制作首先制作从1-12的数字: var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.wid
阅读全文
摘要：先上 demo: https://grewer.github.io/JsDemo/canvasLine/ 这两天我一直在研究这个动画,花了大量的时间来想是如何实现的, 一开始我是想在进入 canvas 时按时间来用 lineTo 绘出六边形,退出时反方向再绘出白色的一条线; 想这样: 进入canva
阅读全文
摘要：参考文章:http://www.cnblogs.com/xiaohuochai/p/7452898.html 网页查看: https://grewer.github.io/JsDemo/canvasParticle/
阅读全文
摘要：var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var Grewer = { init: function() { this.getWindowSize(); canvas.widt
阅读全文
摘要：之前我看到一篇文章是介绍彩色小球的实现; 链接:http://www.cnblogs.com/xiaohuochai/p/6370123.html 我按照他的思路也写了一个: 代码: demo: http://en.jsrun.net/ryiKp/show 而后我又想起了以前想做的下雪的效果; 于是
阅读全文
摘要：最近写的小 demo,使用的是h5的 canvas来对图片进行放大,移动,剪裁等等这是最原始的代码,比较接近我的思路,后续会再对格式和结构进行优化 html: js:初始代码 var img = new Image(); var can = document.getElementById('show
阅读全文