canvas的绘图2
来源:互联网 发布:汉诺塔算法内部流程 编辑:程序博客网 时间:2024/05/16 07:37
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><canvas id="canvas1" width="800" height="800"></canvas><script>function draw1(){var c=document.getElementById("canvas1");var ctx=c.getContext("2d");ctx.fillStyle='red';ctx.fillRect(0,0,150,150);ctx.save();ctx.fillStyle='green';ctx.fillRect(15,15,120,120);ctx.save();ctx.fillStyle='blue';ctx.fillRect(30,30,90,90);ctx.restore();ctx.fillRect(45,45,60,60);ctx.restore();ctx.fillRect(60,60,30,30);}window.addEventListener("load",draw1(),true);</script></body></html>在
在绘图代码上如果不加save属性会怎么样呢?则默认是红色的,保存一次颜色,需要加一次save.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><canvas id="canvas2" width="800" height="800"></canvas><script>function draw2(){var c=document.getElementById("canvas2");var ctx=c.getContext("2d");ctx.fillStyle="red";ctx.font="40px 隶书";ctx.fillText("Hello H5",0,100);ctx.setTransform(1,-0.5,0,-1,0,2);ctx.fillText("Hello H5", 0, -100)}window.addEventListener("load",draw2(),true);</script></body></html>
定义和用法
画布上的每个对象都拥有一个当前的变换矩阵。
transform() 方法替换当前的变换矩阵。它以下面描述的矩阵来操作当前的变换矩阵:
a c eb d f0 0 1
换句话说,transform() 允许您缩放、旋转、移动并倾斜当前的环境。
注释:该变换只会影响 transform() 方法调用之后的绘图。
注释:transform() 方法的行为相对于由 rotate(), scale(), translate(), or transform() 完成的其他变换。例如:如果您已经将绘图设置为放到两倍,则 transform() 方法会把绘图放大两倍,您的绘图最终将放大四倍。
JavaScript 语法:
context.transform(a,b,c,d,e,f);
参数值
该旋转方法,仍然遵循逆时针为负,顺时针为正的原则
。
阅读全文
0 0
- canvas的绘图2
- SWT的Canvas绘图
- canvas 绘图的步骤
- qml的绘图Canvas
- 二次利用Canvas的绘图
- Canvas绘图的使用(一)
- 浅谈Canvas的状态绘图
- 一个有意思的Canvas绘图
- HTML5 - canvas 2D绘图
- 6.HTML5 Canvas 绘图-2
- Canvas绘图
- Canvas绘图
- canvas绘图
- 一个简单的Canvas绘图的代码
- Canvas绘图(各种图片的绘制)
- Canvas基础4-绘图的简单变形
- canvas的简单绘图应用の刮刮乐
- Android_2D绘图的学习Paint,Canvas(一)
- 合并分支的拟人化
- 利用SwipeRefreshLayout实现类似知乎客户端的一打开界面就自动刷新的效果
- 信号中断 与 慢系统调用
- Spring-boot 配置Aop获取controller里的request中的参数以及其返回值
- 使用layui日期控件laydate对开始和结束时间进行联动控制
- canvas的绘图2
- spring整合quartz配置模板
- 网络字节序和本机字节序的思考
- ci 的routes里可以自定义路由内容
- TCP拥塞控制
- java charToByte
- SQLite Expert Professional(SQLite数据库管理工具)官方正式版32位V5.2.2.267下载 | sqlite expert professional破解版
- 思科VPN报错440,Driver failure的解决方法
- C/C++中extern关键字详解