html5canvas局部放大，canvas拖拽放大缩小

html5的canvas画线问题记住，这里是以canvas画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右。笔画停点(lineTo())同理，context.lineTo(600 ， 600) 。这句的意思是从上一笔的停止点绘制到(600，600)这里。
使用HTML Canvas绘制线条，我们需要用到的是Canvas上下文的MoveTo()和LineTo()方法，下面我们就来看看具体的内容。
其中创建一个canvas元素就可以创建一个画布，但是如果你不设置参数的话，在浏览器上面是不显示的。所以可以设置一些参数让画布显示出来。
这个玩意有点复杂。首先要获取点击发生鼠标所在的坐标。然后判断这个坐标是否在图形的范围内。如果在，刚可以视为点击了该图形。图形本身是不能响应事件的。必须用canvas代理。只是要判断的情况有时候很复杂。
HTML5中canvas元素如何绘制图形//接下来就可以调用context的方法来调用绘图API 基础API1 坐标系统Canvas 2D渲染上下文采用平面笛卡尔坐标系统，左上角为原点(0，0)，坐标系统的1个单位相当于屏幕的1个像素。
在HTML5中，首先需要使用canvas标签创建画布，然后在画布中使用javascript的font属性、fillText()或strokeText()方法来绘制文本图形。
在HTML5中可以通过canvas元素以及脚本来绘制图形，以及fillRect()方法和clearReact()方法来实现清除图像的效果在HTML5中新增了许多新的元素，可以帮助我们实现许多新的功能。
使用HTML5 canvas绘制一个矩形，我们需要用到Canvas上下文的rect（）方法。接下来我们就来看看具体的代码实现。
HTML5中的Canvas并没有直接提供绘制椭圆的方法，下面是对几种绘制方法的总结。各种方法各有优缺，视情况选用。
概述HTML5中的Canvas并没有直接提供绘制椭圆的方法，下面是对几种绘制方法的总结。各种方法各有优缺，视情况选用。
如何解决html5canvas绘制字体、图片与图形模糊问题不光绘制图片，在高分屏下，绘制文字和线条都会出现模糊的现象，GitHub上有一个hidpi-canvas-polyfill可以很好的解决这个问题，但是没有对图片进行处理。如果你了解了原因，解决这个问题也很容易。
首先一样，获取Canvas对象：获取像素比，将Canvas宽高进行放大，放大比例为：devicePixelRatio/webkitBackingStorePixelRatio ，我们写了一个兼容的方法。按实际渲染倍率来缩放canvas 。
按实际渲染倍率来缩放canvas 。注意基础知识点：要设置canvas的画布大小，使用的是和；要设置画布的实际渲染大?。褂玫膕tyle属性或CSS设置的width和height，只是简单的对画布进行缩放。
解决方案是自己写算法进行平均采样实现方式有两种，一种是js对像素点进行手动合并采样，具体算法可以用这个：github 。
html5canvas的宽高有大小限制吗?没有大小限制 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。
可以用JS监控屏幕大小，然后调整Canvas的大小。
其实，看上去简单，实际用起来还是有一些问题的。
也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置 canvas 的宽高。
/canvas设置画布的大小为：宽400px、高200px，添加一个2px的红色、实线边框；在给创建好的画布一个id=myCanvas值，方便在下面绘制图形是找到画布元素。
也就是说，属性中的宽高并不代表实际宽高，所以高dpi下会放大canvas ，导致模糊。canvas的width、height属性是canvas的后缓冲尺寸，绘制到浏览器后会根据当前dpi进行缩放。

html5canvas局部放大，canvas拖拽 放大缩小

html5canvas局部放大，canvas拖拽放大缩小