canvas手机端绘图解决方案

解决方案js:https://pan.baidu.com/s/1jIys2aU

我们使用canvas通常会遇到一个问题就是坐标系的问题,如果按象限来说，一般canvas是在第四象限,但是我们通常都喜欢在第一象限来计算,第二个问题是手机端用canvas绘图很粗糙，这个在上一章节也说过,今天就根绝这两个问题，写一个解决方案：

首先我们html里面的canvas要这么写:<canvas id="myCanvas" width="750" height="750" layoutwidth="750" ></canvas>其中layoutwidth是表示canvas设计稿的宽度(一般都是按照苹果6的设计稿,宽度是750)，width和height属性表示在750的设计稿中canvas的实际宽高（建议阅读本章前，先了解手机下rem的使用，本解决方案参考了rem的解决方案），然后引入我写的js后，var myCanvas = new carvasCloth("myCanvas")，然后就可以绘图了，我是这样使用的把我写的解决方案js作为一个基类,然后另写一个针对特定业务的js继承这个基类,然后再这个特定的js里面实现具体的绘图操作

this.gY 是一个方法,返回的是按照第一象限下y的坐标，比如说我想画一个点{x:10,y:10}你如果直接画,那是按照第四象限来画的,这样写:{x:10,y:this.gY(10)}就是按照第一象限来了

this.gYAdd 有时候我想计算两个已经计算的坐标的相加值，this.gYAdd（this.gY(10),this.gY(20)）
this.gYsubtract 有时候我想计算两个已经计算的坐标的相减值，this.gYsubtract（this.gY(10),this.gY(20)）
this.gX 返回是X的坐标
this.gW返回单位宽度内的实际宽度 this.gW(1)表示在画布内一单位宽度的实际宽度

转载于:https://www.cnblogs.com/mrzhu/p/6762605.html

canvas手机端绘图解决方案相关推荐

媒体查询、px和rem转换、浏览器兼容、手机端视频播放解决方案
媒体查询响应式的界面不局限于某一固定分辨率.所以如何在不同的尺寸的设备上很好地展示界面,是一个很大的问题. 为了更好的适配设备,我们按照不同的分辨率对设备进行了划分. 在这里插入代码片/* 大屏幕( ...
表单界面的兼容PC手机端解决方案
表单界面的兼容PC手机端解决方案参考文章: (1)表单界面的兼容PC手机端解决方案 (2)https://www.cnblogs.com/MuYunyun/p/6427185.html (3)htt ...
移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
飞机大战HTML5游戏源码，基于Canvas制作的网页版飞机大战游戏+飞机大战手机端
简介: 飞机大战HTML5游戏源码是一款基于Canvas制作的网页版飞机大战游戏,画质精美的飞机大战手机端游戏源码网盘下载地址: http://kekewangLuo.net/W1S2LQcqAT2 ...
(JSP)关于手机端（尤其是苹果手机）pdf文件无法打开的解决方案
(JSP)关于手机端(尤其是苹果手机)pdf文件无法打开的解决方案参考文章: (1)(JSP)关于手机端(尤其是苹果手机)pdf文件无法打开的解决方案 (2)https://www.cnblogs. ...
手机端页面自适应解决方案—rem布局进阶版
旧版rem布局 <手机端页面自适应解决方案-rem布局>, 此方案仅适用于移动端web 文章底部常见问题说明第四条,笔者已给出一个相当便捷的解决方案,欢迎留言交流.(2017/9/9) 该 ...
移动端(手机端)页面自适应解决方案—rem布局篇 1
动端(手机端)页面自适应解决方案-rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流 ...
大商创常见问题 mysql_大商创手机端出现404的官方解决方案
大家反馈的404提示其实分为两种一.环境配置不支持伪静态导致服务器提示404,如图: 解决方案: 此类提示说明 nginx 或 iis 不支持伪静态提示404,更新89号补丁即可. 更新完补丁后记 ...
html5中canvas画布实现手机端和移动端的刮刮乐效果
用html5中的canvas实现刮刮乐的效果使用html+css实现背景的样式使用clearRect()方法实现挂去的作用手机端使用addEventListener()监听手机端滑动事件tou ...

canvas手机端绘图解决方案

canvas手机端绘图解决方案相关推荐

最新文章

热门文章