您的位置:博客首页 >> Web技术 >> [杂]html5的canvas

[杂]html5的canvas

日志编号:101 发表时间: 2012-03-30 18:15:44 关注次数:3452
以下的代码很杂,非常杂,杂得很。

<canvas id="xuexi" width="300" height="300">不支持html5的浏览器</canvas>

<script>
var canvas = document.getElementById('xuexi');//固定
if (canvas.getContext){//固定
    var ctx = canvas.getContext('2d');//固定

    ctx.fillRect(25,25,100,100);//画实心
    ctx.clearRect(45,45,60,60);//裁剪
    ctx.strokeRect(50,50,50,50);//线框

    canvas.beginPath(); //绘制路径开始
    canvas.arc(100, 100,85,0, Math.PI*2, true);
// 结束
canvas.moveTo(75,50);//移动到
canvas.arc(100, 100,35,0, Math.PI*2, true);//画圆弧
ctx.lineTo(25,105);//画直线
canvas.quadraticCurveTo(25,25,25,62.5);//函数曲线
canvas.bezierCurveTo(75,37,70,25,50,25);//函数曲线,贝塞尔曲线

canvas.fillStyle = "orange";   //颜色
canvas.fillStyle = "#FFA500";   //颜色 红绿蓝
canvas.fillStyle = "rgb(255,165,0)";  //颜色 红绿蓝
canvas.fillStyle = "rgba(255,165,0,0.1)"; //颜色+透明

canvas.stroke();//画线
canvas.fill();// 填色
canvas.closePath();

  }

</script>


文章:https://developer.mozilla.org/cn/Canvas_tutorial
本站不提供讨论功能。
本站所有非新闻类文章均为原创,且禁止转载。
本站为了获得更多流量赚取广告费,难免会有以次充好的文章,望见谅,勿鄙视。