Canvas绘图详解

来源：互联网发布：赛门铁克软件编辑：程序博客网时间：2024/05/21 09:57

参考地址:

http://www.imooc.com/learn/185

线条的属性:
1. lineWidth
2. lineCap
3. lineJoin:miter bevel round
4. miterlimit

绘制五角星的算法:

var R = 200;var r = 100;var xr = 450;var yr = 300;var RDeg = 18;var rDeg = 54;window.onload = function(argument) {    var canvas = document.getElementById('canvas');    var context = canvas.getContext("2d");    // 绘制外面的大圆    context.beginPath();    context.arc(xr,yr,R,0,2*Math.PI,false);    context.strokeStyle = 'red';    context.lineWidth = '2px';    context.closePath();    context.stroke();    // 绘制里面的小圆    context.beginPath();    context.arc(xr,yr,r,0,2*Math.PI,false);    context.strokeStyle = 'red';    context.lineWidth = '2px';    context.closePath();    context.stroke();    context.beginPath();    var flag = 0;    context.moveTo(xr + R * Math.cos(RDeg / 360 * (2 * Math.PI )),                   yr - R * Math.sin(RDeg / 360 * (2 * Math.PI )));    RDeg += 72;    while(flag != 10){        if (flag % 2 == 1) {            context.lineTo(xr + R * Math.cos(RDeg / 360 * (2 * Math.PI )),                           yr - R * Math.sin(RDeg / 360 * (2 * Math.PI )));            RDeg += 72;                 }else{            context.lineTo(xr + r * Math.cos(rDeg / 360 * (2 * Math.PI )),                           yr - r * Math.sin(rDeg / 360 * (2 * Math.PI )));            rDeg += 72;        }        flag ++ ;    }     context.closePath();    context.stroke();}

0 0