Canvas俄罗斯方块
写在前面潜水博客园多年，从未写过博客。最近才注册博客，遂将很久前写的俄罗斯方块分享出来。第一次写博客，不喜勿喷。。。游戏说明游戏操作：J向左，L向右，I旋转，K快速下降游戏基于HTML canvas开发，请在支持HTML5的浏览器中运行（IE9+, Chrome, Firefox...）目前通过Co...
canvas rotate中心点问题详解
ctx.fillStyle = "rgb(250,0,0)";ctx.save();ctx.translate(50,50); //这个translate(50，50)发生在rotate()之前,其目的是将旋转点从默认点(0，0),移动到(50，50),下面紧跟着的rotate就是按照这个点来转//...
VUE 移动SPA html2canvas截图不清晰问题
1、最近做一个移动web,用到html2canvas截图模糊问题一直存在网上找了很久依然没有解决 ：原因是devicePixelRatio决定了canvas的清晰度 ：网上又有了修改html2canvas源码生成dom元素的宽高倍数var node = ((nodeList === undefine...
Canvas - 使用画布实现内侧阴影和外侧阴影
前言本方法也使用画布和JavaScript通过浏览器绘制文本和实现特殊效果。通过画布无法直接实现内侧渐变的阴影效果或插图效果，但是，使用stroke方法可以模拟文本中的内侧阴影。 准备工作本方法会使用前面章节已经使用过的一段代码。可以从Packt Publishing的网站直接下载这段代码，它与2....
uni-app踩坑之canvas绘制不显示
uni-app踩坑之canvas绘制不显示问题描述：如下图所示，我用canvasShow来控制 canvas相关dom的隐藏与出现canvasShow的默认值为false，当canvasShow的值第一次变为true时，绘制的矩形并不能出现；之后就能正常出现了。问题分析：在canvasShow第一次...
web移动端html2canvas踩坑
1.跨域图片无法展示我们的图片资源是走cdn的，所以导致了图片的链接域名与网页的域名不一致，而产生了跨域问题，可能导致图片无法展示。解决：步骤1：将html2canvas中的参数设置中的useCORS属性改为true，使html2canvas接受处理跨域资源。步骤2： 使图片资源允许跨域（响应头中...
移动端的canvas电子签名
移动端的canvas电子签名效果，使用的是touch事件，pc端不支持canvas设置的是手机端全屏宽高，可自己进行设置，手指滑动即可代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><tit...
Unity 3D UGUI 游戏界面 Canvas组件
Canvas组件是UI的基础画布，所有UI元素都必须放在 Canvas组件下面，并且它支持嵌套。 Canvas支持3种绘制方式，Overlay（最上层） Camera 和 World Space（3D布局），其中用的最多的是Camera，它可以把正交摄像机投影出来的UI元素绘制在Canvas面板上...
html2canvas 截图空白 与截图不全
getCanvasPic1() { //导出时让最外面DIV滚动在最上面，导出全图 this.$refs.flow.scrollTop = 0 html2canvas(this.$refs.flow).then(canvas => { // 转成图片，生成图片地址 this....
html2canvas页面截图图片不显示
前两天在一个群里，有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字，我没有做过屏幕截图的需求，所以不是很清楚，今天稍稍测试了一下。在github上将html2canvas源码下载到本地，examples文件夹里有三个示例demo，这三个demo都是纯文字不包含图片的，...
H5小游戏 - canvas涂鸦板
H5小游戏 - 涂鸦板效果截图：html代码如下：<!DOCTYPE html><html><head><meta charset="utf-8" /><title>H5 canvas涂鸦板制作</title><scrip...
HTML5 canvas 圆环扩散效果
【canvas】圆环扩散效果使用 HTML5 canvas 制作圆环扩散的效果 以下是效果图下面是实现代码仅供参考 转载请注明出处如有问题请联系页面元素<!DOCTYPE html><html lang="en"><head> <meta charse...
QML学习笔记-纯qml实现canvas画板功能-鼠标画图
gitHub:sueRimn源码：qml-draw-canvas (随笔画) qml-draw-canvs-press（按压随笔画）qml-draw-canvas-path(预览路径)用纯qml实现canvas画板功能，用鼠标进行画图，可以画直线，画圆，画矩形，画弧线。由于canvas画图会有延迟...
svg转化成canvas以便生成base64位的图片
很久前写了关于把html转成图片的一个例子，最近有出了新的问题。利用html2canvas.js文件把html转成base64位的图片是没什么问题的，但也不是绝对的，比如这时候不能碰见svg这个鬼，html2canvas碰见svg就不好用了，svg的元素会不能出现在生成的图片中。这时候我看到了htm...
实现一个canvas小画板
<canvas>是HTML5新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。——摘自MDN canvas MDNcanvas有许多的API，可以插入图片，可以编写文字，可以处理视频。...
安装canvas
本方法仅适用用于window系统安装canvas需要当前工作环境拥有python魂晶，且只能适用python2.7版本，v3.x.x版本会造成系统报错1.在管理员权限下 使用choco install -y python2 gtk-runtime microsoft-build-tools libj...
HTML5 canvas 拖尾效果（或尾巴 或方向标 或留痕。。。）
【canvas】带拖尾效果的旋转扩散使用 HTML5 canvas 制作一个圆形的拖尾，以及附加上拖尾的扩散效果我说说的拖尾，就是拖着一个尾巴，其他简短的名词暂时想不到了。下图效果弄出来，着实费劲，还是基础太差了，好在都不难，还可以补救补救，写博客记录下，本打算弄Canvas弄个好玩的东西出来，实际...
canvas + JavaScript实现幸运大转盘
HTML代码：<!doctype html><html><head><meta charset="utf-8"><title>抽奖</title><meta http-equiv="content-type" conten...
canvas绘制文本内容自动折行（mpvue实现）
一、说明在微信小程序中使用canvas绘制文本，文本内容是不会自动折行的，所以封装方法使得内容能够自动折行。 二、代码 <canvas class="myCanvas" canvas-id="myCanvas"></canvas> onLoad () { let ...
canvas基础入门系列教程(7)-绘制文本
5.绘制文本5.1.strokeText方法通过strokeText方法可以绘制描边的文本// 语法ctx.strokeText(text, x, y [, maxWidth]);参数说明text 使用当前 font，textAlign，textBaseline和direction 的值对文本进行渲...