今天看啥
热点:

HTML5 画布 Canvas,html5画布canvas


利用html5的canvas元素使用 JavaScript 在网页上绘制图像。

通过规定尺寸、颜色和位置,来绘制一个圆:

<!DOCTYPE htma>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #3CF;">
Your browser does not support the canvers element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#3CF";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();


</script>


</body>
</html>

通过指定从何处开始,在何处结束,来绘制一条线

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

</body>
</html>

使用您指定的颜色来绘制渐变背景

<!DOCTYPE htma>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:4px solid #3CF;">
Your browser does not support the canvers element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>


</body>
</html>


把一幅图像放置到画布上
<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);

</script>

</body>
</html>












对于HTML5清除canvas画布问题

是啊,好奇怪呀。。。为什么呢。。。不过倒是可以投机取巧:

<body>
<canvas id="bo" width="500" height="500" style="border:1px solid">您的浏览器不支持次应用,请更新浏览器</canvas>
<input type="button" onclick="clea()" value="清空" />
<script src="code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
var canvasInit = function(){
var canvas = document.getElementById('bo');
var pic=canvas.getContext("2d");
pic.lineWidth=5;
pic.strokeStyle="red";
var con=false;
$("#bo").mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
con=true;
pic.moveTo(mouseX,mouseY);
});
$("#bo").mouseup(function(e){
con=false;
})
$("#bo").mousemove(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
if(con)
pic.lineTo(mouseX,mouseY);
pic.stroke();
})
}
canvasInit();
function clea(){
var tmp = $('#bo').clone();
$('#bo').remove();
$('body').prepend(tmp);
canvasInit();
//pic.clearRect(0,0,500,500);
}
</script>...余下全文>>
 

对于HTML5的画布canvas画已有图像功可以

纯html5无法高效地做到,但是你可以用PNG图像,先把所有黑色部分填成透明
 

www.bkjia.comtruehttp://www.bkjia.com/webzh/886360.htmlTechArticleHTML5 画布 Canvas,html5画布canvas 利用html5的canvas元素 使用 JavaScript 在网页上绘制图像。 通过规定尺寸、颜色和位置,来绘制一个圆: !DOCTY...

相关文章

相关搜索: html5

帮客评论

视觉看点