html5中canvas.save与canvas.restore用法

最新推荐文章于 2021-06-22 16:17:54 发布

水星灭绝

最新推荐文章于 2021-06-22 16:17:54 发布

阅读量470

点赞数 1

分类专栏： h5 前端

本文链接：https://blog.csdn.net/wulong710/article/details/108674385

版权

1.先canvas.save保存原始配置状态

2.再做translate变形等操作绘制图形

3.再canvas.restore恢复原始配置状态

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>脚本</title>
  <style>
    canvas {
      background-color: aqua;

      /* transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      -webkit-transform: rotate(30deg);

      transform: skew(60deg,0deg);
      -ms-transform: skew(60deg,0deg);
      -webkit-transform: skew(60deg,0deg); */

      /* transform: translate(100px, 50px); */
      /* -ms-transform: translate(100px, 50px);
      -webkit-transform: translate(100px, 50px); */

    }

    div#ndiv {
      background-color: yellow;
      transform: rotate(60deg);
      -ms-transform: rotate(60deg);
      /* IE 9 */
      -webkit-transform: rotate(60deg);
      /* Safari and Chrome */
    }
  </style>
&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

水星灭绝

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5中canvas.save与canvas.restore用法

1.先canvas.save保存原始配置状态2.再做translate变形等操作绘制图形3.再canvas.restore恢复原始配置状态<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>脚本</title> <style> .
复制链接

扫一扫