canvas路径操作

来源:互联网 发布:淘宝什么买家秀大尺度 编辑:程序博客网 时间:2024/06/05 10:01
<!DOCTYPE html><html><head><meta charset="utf-8"><title>canvas</title><style>body{    background:#808080;}#canvas{    background:#FFFFFF;}</style><script>   window.onload = function(){       //获取canvas画布       var canvas = document.getElementById('canvas');       //获取2d绘图环境       cxt = canvas.getContext('2d');                cxt.strokeRect(300,300,100,100);        //清除路径        cxt.clearRect(0,0,canvas.width,canvas.height);                cxt.save(); //保存路径        cxt.fillStyle = 'red';        cxt.fillRect(100,100,100,100);        cxt.restore();//恢复路径        cxt.fillRect(200,200,100,100);           }</script></head><body><canvas id="canvas" width="500" height="500"></canvas></body></html>


效果图:


0 0
原创粉丝点击