缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。
ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置
x： 添加到水平坐标（x）上的值
y： 添加到垂直坐标（y）上的值
发生位移后，相当于把画布的0,0坐标 更换到新的x,y的位置，所有绘制的新元素都被影响。
位移画布一般配合缩放和旋转等。
context.rotate(angle) 方法旋转当前的绘图
注意参数是弧度（PI）
如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
以下程序实现了在canvas上画红色的圆，圆心为鼠标所在位置，其中圆的位置随着鼠标位置的移动而移动，js代码中mousePos(e)方法用于获取鼠标在整个页面的坐标，getCanvasPos(canvas,e)方法用于获取鼠标在canvas上的坐标；canvas以其左上角为起点，并设为(0,0)，因此当页面包含其他元素的时候，两者坐标不一致，不过在本例中两者坐标是一致的，因为页面只包含一个canvas元素：html代码如下：
[html] view plain copy
<html>
<head></head>
<body>
<div onmousemove="draw(event)" id="testcanvas">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3" >
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript" src="abc.js">
</script>
</div>
</body>
</html>
其中abc.js文件中的代码如下：
[javascript] view plain copy
function mousePos(e)
{//获取鼠标所在位置的坐标，相对于整个页面
var x,y
var e = e||window.event
return {
x:e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop + document.documentElement.scrollTop
}
}
function getCanvasPos(canvas,e)
{//获取鼠标在canvas上的坐标
var rect = canvas.getBoundingClientRect()
return {
x: e.clientX - rect.left * (canvas.width / rect.width),
y: e.clientY - rect.top * (canvas.height / rect.height)
}
}
function draw(e)
{
var c=document.getElementById("myCanvas")
var cxt=c.getContext("2d")
cxt.clearRect(0,0,c.width,c.height)
cxt.fillStyle="#FF0000"
cxt.beginPath()
//cxt.arc(mousePos(e).x,mousePos(e).y,15,0,Math.PI*2,true)
cxt.arc(getCanvasPos(c,e).x,getCanvasPos(c,e).y,15,0,Math.PI*2,true)
cxt.closePath()
cxt.fill()
}
Canvas（画布）是在 HTML5 中新增的标签用于在网页实时生成图像，可以 *** 作图像内容，是一个可以用 JavaScript *** 作的位图（bitmap）。
游戏：canvas 在基于 Web 的图像显示方面比 Flash 更加立体、更加精巧，canvas 游戏在流畅度和跨平台方面更优秀。
可视化的库：Echart
banner 广告：Canvas 实现动态的广告效果非常合适
图形编辑器：后续 PhotoShop 能够 100%基于 Web 实现
微信读书、腾讯文档均是通过 canvas 实现
在 canvas 中默认坐标系在左上角（X 轴正方向向右、Y 轴正方向向下），可是有的时候需要变换坐标系才能更方便的实现所需的效果，此时需要变换坐标系，canvas 提供了以下几种变换坐标系的方式：
根据坐标系绘制内容
利用 canvas 绘制图形时势必要上点颜料，通过设置 fillStyle 属性即可设置对应的颜料，对于颜料值主要有以下四种：纯颜色、线性渐变颜色、径向渐变颜色、位图。
有的时候需要引入外部图片，然后对外部图片进行像素级别的处理，最后进行保存。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）