canvas环境的保存和恢复及进度条实例
2017-06-05 本文已影响90人
郭钰涛
Canvas进阶
阴影
渐变
线性渐变
径向渐变
- createRadiaGradient(x1, y1, r1, x2, y2, r2)
- addColorStop()
把背景图片作为填充
- createPattern(imgDom, repeate)
- 第二个参数 repeate/ repeat-x / repeat-y / no-repeat
变换
缩放
- sacle(x, y)
位移
- translate(x, y)
旋转
- rotate(angle)
环境的保存和恢复
- save()
- restore()
设置透明
- globalAlpha = number 设置不透明度
- 全局设置是对整个画布（绘图环境） 进行设置
限定绘图区域
- clip()
输出base64编码
- canvas.toDataURL(type, encoder)
- type为mime类型 image/jpeg image/gif image/png image/webp
画布渲染画布
把一个画布以图片的形式用 drawImage() 插入到另一个画布
这是一种canvas的优化手段
设置线条
- lineCap 属性 设置线条两端的形状 butt/round/square
- lineJoin 属性 设置线条夹角 miter/bevel/round
- miterLimit 属性 设置夹角斜角的最大长度 一般默认 10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html{
overflow: hidden;
}
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<canvas id="mycanvas">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 600;
canvas.height = 600;
canvas.style.border = "1px solid #ccc";
var cxt = canvas.getContext("2d");
cxt.fillStyle = "green";
//声明开始坐标
var x = 10
//设置定时函数
var run =setInterval(function(){
//填充矩形
cxt.fillRect(50,110,x,20);
//进度条X轴增加
x+=1;
if (x>500) {
//清除定时函数
clearInterval(run);
}
},5)
</script>
</body>
</html>
