clearRect（）方法无法清空曲线
<!-- 第231行，使用 ctx.clearRect(0,0,canvas.width,canvas.height); 清空画布，会出现bug，不能清空口号下面的曲线，如果更改口号文字多次点击生成名片，会同时出现多条曲线。后来通过搜索引擎得知只好用重新设置canvas宽高的方法。 -->
正在回答 回答被采纳积分+1
var job = getElem('.job');
if (job.value) {
var str = job.value;
}else{
var str = "请输入职业";
}
offctx.font = "20px Microsoft YaHei";
offctx.fillStyle = ('rgb(255,255,255)');
offctx.fillText(str,120,87);
offctx.save();
var slogans = getElem('.slogans');
if (slogans.value) {
var str = slogans.value;
}else{
var str = "请输入口号";
}
offctx.font = "20px Microsoft YaHei";
offctx.shadowOffsetX = 10;
offctx.shadowOffsetY = 10;
offctx.shadowColor = 'rgba(0,0,0,0.5)';
offctx.shadowBlur = 0.3;
offctx.rotate(Math.PI*47/24);
offctx.fillStyle = ('rgb(255,255,255)');
offctx.fillText(str,400,110);
offctx.moveTo(400,130);
if (str.replace(/[^\x00-\xff]/g,'**').length<8) {
offctx.quadraticCurveTo(400,115,500,120);
}else{
offctx.quadraticCurveTo(400,115,400+(str.replace(/[^\x00-\xff]/g,'**').length)*12,120);
}
offctx.strokeStyle = ('rgb(255,255,255)');
offctx.stroke();
offctx.restore();
}
draw();
getElem('.confirm').onclick = function(){
ctx.canvas.width = 600;
ctx.canvas.height = 100;
offctx.canvas.width = 600;
offctx.canvas.height = 100;
// ctx.clearRect(0,0,canvas.width,canvas.height);
draw();
}
var posy=[0,0,0,0,0,0,0];
var r = [1.4*3,1.7*3,1*3,1.2*3,1.5*3,2*3,1.6*3];
setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(offCanvas,0,0);
posy[0] = posy[0]+1.5;
posy[1] = posy[1]+1.2;
posy[2] = posy[2]+4;
posy[3] = posy[3]+3;
posy[4] = posy[4]+1.7;
posy[5] = posy[5]+1;
posy[6] = posy[6]+2;
for(var i=0;i<7;i++){
var posx = 40;
posx = posx+80*i;
ctx.beginPath();
ctx.arc(posx,posy[i],r[i],0,6.3);
ctx.fillStyle = ('rgba(255,255,255,0.3)');
ctx.fill();
if (posy[i] >=canvas.height+20) {
posy[i] = 0;
}
}
},50);
</script>
</body>
</html>
<!-- 231行，使用 ctx.clearRect(0,0,canvas.width,canvas.height); 清空画布，会出现bug，不能清空口号下面的双曲线，如果更改口号文字多次点击生成名片，会出现多条双曲线。后来通过搜索引擎得知只好用重新设置canvas宽高的方法。 -->
<script>
// 获取元素
var getElem = function( selector ){
return document.querySelector(selector);
}
var getAllElem = function( selector ){
return document.querySelectorAll(selector);
}
// 获取元素的样式
var getCls = function ( element ) {
return element.getAttribute('class');
}
// 设置元素的样式
var setCls = function( element ,cls){
return element.setAttribute('class',cls);
}
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var offcanvas = document.getElementById('offCanvas');
var offctx = offcanvas.getContext('2d');
ctx.canvas.width = 600;
ctx.canvas.height = 100;
offctx.canvas.width = 600;
offctx.canvas.height = 100;
function draw(){
var lg = offctx.createLinearGradient(0,0,600,0);
lg.addColorStop(0.5,'rgb(0,0,0)');
lg.addColorStop(1,'rgb(120,120,120)');
offctx.fillStyle = lg;
offctx.fillRect(0,0,600,100);
offctx.fill();
var img = new Image();
img.src = "img/imooc.png";
img.onload = function () {
offctx.drawImage(img,10,10,80,80);
}
var name = getElem('.name');
if (name.value) {
var str = name.value;
}else{
var str = "请输入名字";
}
offctx.font = "30px Microsoft YaHei";
offctx.fillStyle = ('rgb(255,255,255)');
offctx.fillText(str,120,32);
var address = getElem('.address');
if (address.value) {
var str = address.value;
}else{
var str = "请输入地址";
}
offctx.font = "20px Microsoft YaHei";
offctx.fillStyle = ('rgb(255,255,255)');
offctx.fillText(str,120,60);
.left{
width: 450px;
height: 380px;
float: left;
background: #bbb;
}
.right{
width: 850px;
height: 380px;
float: left;
background: rgba(238,233,213,1);
/*background:black;*/
}
.data{
margin-top: 35px;
width: 450px;
height: 260px;
}
.data input{
width: 350px;
font-size: 12px;
line-height: 30px;
margin: 15px 50px;
border:none;
border-radius: 15px;
text-indent:10px;
}
.confirm{
width: 120px;
height: 32px;
border-radius: 16px;
text-indent:10px;
background: #333;
color: #fff;
margin: 0 160px;
}
</style>
</head>
<body>
<div class="screen_1">
<div class="main">
<div class="left">
<div class="data">
<input type="text" placeholder="姓名" class="name">
<input type="text" placeholder="地址" class="address">
<input type="text" placeholder="职业" class="job">
<input type="text" placeholder="口号" class="slogans">
</div>
<input type="button" value="生成名片" class="confirm">
</div>
<div class="right">
<canvas id="myCanvas">
您的浏览器不支持Canvas，请升级浏览器
</canvas>
<canvas id="offCanvas">
您的浏览器不支持Canvas，请升级浏览器
</canvas>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas</title>
<link type="text/css" rel = "stylesheet" href = "css/style.css"/>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
display: block;
}
a:link,a:visited{
text-decoration: none;
}
body{
font-family: "微软雅黑";
}
header{
position: fixed;
z-index: 1;
width: 100%;
background: linear-gradient( rgba(0,0,0,1), rgba(0,0,0,0)) scroll 0 0;
}
.clearfix::after{
clear: both;
content: " ";
display: block;
height: 0;
visibility: hidden;
}
.container{
height: 60px;
width: auto;
}
#myCanvas {
height: 100px;
width: 600px;
float: left;
margin-left:120px;
margin-top: 100px;
}
#offCanvas {
height: 100px;
width: 600px;
float: left;
margin-left:120px;
margin-top: 50px;
display: none;
}
.screen_1{
width: 100%;
height: 800px;
position: relative;
}
.main{
width: 1300px;
height: 380px;
top: 200px;
left: 50%;
margin-left: -650px;
position: absolute;
}
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 315 人
- 提交作业 136 份
- 解答问题 626 个
如果你有H5、CSS3、JS基础，热爱前端并希望在前端应用方面不断进步，那就来吧，本路径为你带来的课程有HTML5进阶、CSS3进阶、JS面向对象、jQ基础、Less等，助你进一步提升前端开发技能
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星