canvas教程

canvas重画,解决重影问题

字号+ 作者:H5之家 来源:H5之家 2016-01-18 10:15 我要评论( )

刷新canvas,有时会出现上次的内容无法清除而造成重影,需要进行以下步骤的处理: //在手机上,需加上这步,先隐藏再显示,类似刷新。 document.getElementById("chart").style.display = "none"; var canvas_width = 300; var canvas_height = 300; var c =



刷新canvas,有时会出现上次的内容无法清除而造成重影,需要进行以下步骤的处理:


//在手机上,需加上这步,先隐藏再显示,类似刷新。
document.getElementById("chart").style.display = "none";


var canvas_width = 300;
var canvas_height = 300;

var c = document.getElementById("chart");
var ctx = c.getContext("2d");

//保存canvas的设置,将transform初始化,并清除整个画图区域
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0,0,canvas_width,canvas_height);

//处理canvas 画图
...
...

//还原canvas设置
ctx.restore();

//在手机上,需加上这步,先隐藏再显示,类似刷新。
document.getElementById("chart").style.display = "";

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • 学习慕课网canvas倒计时实例笔记

    学习慕课网canvas倒计时实例笔记

    2017-04-30 14:01

网友点评