<style type="text/css">
.bj{width: 100%;height: 100%;background-color: red;position: relative;z-index: 1;}
#canvas{position: absolute;z-index: 2;}
</style>
<div class="bj">
<canvas id="myCanvas" width="200" height="200" >
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
//var zhezhao = document.getElementById("zhezhao");
var pmk = $(document).width();
var pmg = $(document).height();
$('#myCanvas').attr("width",pmk);
$('#myCanvas').attr("height",pmg);
var cxt = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
cxt.drawImage(img,0,0,pmk,pmg);
cxt.lineWidth = 20;//线的宽度
cxt.lineCap = "round";//线的两头样式为圆
cxt.lineJoin = "round";//线的拐角样式为圆
// cxt.beginPath();
// cxt.moveTo(100,100);
// cxt.lineTo(200,200);
// cxt.lineTo(100,200);
// cxt.stroke();
cxt.save();
var startX,startY;
function touchStart(event){
event.preventDefault();
if(!event.touches.length) return;
var touch = event.touches[0];
startX = touch.pageX;
startY = touch.pageY;
cxt.clearRect(startX,startY,50,50);
//cxt.arc(startX,startY,10,0,Math.PI*2,true);
cxt.stroke();
cxt.restore();
//cxt.moveTo(100,100);
//alert(startX);
// cxt.beginPath();
// cxt.clearRect(startX,startY,50,50);
// cxt.closePath();
// cxt.fill();
// cxt.restore();
}
//add touch start listener
canvas.addEventListener("touchstart",touchStart,false);
}
img.src= g_basePath+"testlive/wd/images/sdf.png";
// cxt.fillStyle = "#000";
// cxt.fillRect(0,0,pmk,pmg);
//cxt.strokeStyle = "ff0000";
//cxt.strokeStyle = "rgba(255,0,0,0.5)";//线的颜色
</script>
.bj{width: 100%;height: 100%;background-color: red;position: relative;z-index: 1;}
#canvas{position: absolute;z-index: 2;}
</style>
<div class="bj">
<canvas id="myCanvas" width="200" height="200" >
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
//var zhezhao = document.getElementById("zhezhao");
var pmk = $(document).width();
var pmg = $(document).height();
$('#myCanvas').attr("width",pmk);
$('#myCanvas').attr("height",pmg);
var cxt = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
cxt.drawImage(img,0,0,pmk,pmg);
cxt.lineWidth = 20;//线的宽度
cxt.lineCap = "round";//线的两头样式为圆
cxt.lineJoin = "round";//线的拐角样式为圆
// cxt.beginPath();
// cxt.moveTo(100,100);
// cxt.lineTo(200,200);
// cxt.lineTo(100,200);
// cxt.stroke();
cxt.save();
var startX,startY;
function touchStart(event){
event.preventDefault();
if(!event.touches.length) return;
var touch = event.touches[0];
startX = touch.pageX;
startY = touch.pageY;
cxt.clearRect(startX,startY,50,50);
//cxt.arc(startX,startY,10,0,Math.PI*2,true);
cxt.stroke();
cxt.restore();
//cxt.moveTo(100,100);
//alert(startX);
// cxt.beginPath();
// cxt.clearRect(startX,startY,50,50);
// cxt.closePath();
// cxt.fill();
// cxt.restore();
}
//add touch start listener
canvas.addEventListener("touchstart",touchStart,false);
}
img.src= g_basePath+"testlive/wd/images/sdf.png";
// cxt.fillStyle = "#000";
// cxt.fillRect(0,0,pmk,pmg);
//cxt.strokeStyle = "ff0000";
//cxt.strokeStyle = "rgba(255,0,0,0.5)";//线的颜色
</script>