canvas 简单绘图

// canvas 简单例子
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    // 线宽
    context.lineWidth = 4;
    // 画笔颜色
    context.strokeStyle = 'red';
    // 填充色
    context.fillStyle = "red";
    // 线帽类型
    context.lineCap = 'butt'; // round, square
//    // 开始路径
//    context.beginPath();
//    // 起点
//    context.moveTo(10,10);
//    // 终点
//    context.lineTo(150,50);
//    // 绘制
//    context.stroke();
    
    // 矩形
//    context.beginPath();
//    context.strokeRect(10,10,70,40);
//    // 矩形的另一种方式
//    context.rect(10,10.70,40);
//    context.stroke();
    
    // 实心矩形
//    context.beginPath();
//    context.fillRect(10,10,70,40);
    // 另一种方式实心矩形
//    context.beginPath();
//    context.rect(10,10,70,40);
//    context.fill();
    
//    // 圆形
//    context.beginPath();
//    // 圆中心坐标x, 圆中心坐标Y, 圆弧半径， 起始角度，终止角度，是否逆时针
//    // 第4个参数和第五个参数是要传入的弧度，如果画30角度，需要将其转化为弧度 30 * Math.PI / 180
//    context.arc(100,100,70,0,130 * Math.PI / 180, true);
//    context.stroke();
//    context.fill();
    
//     // 圆角
//    context.beginPath();
//    context.moveTo(20,20);
//    context.lineTo(70,20);
//       // 为一条路径画弧度p1.x p1.y p2.x, p2.y 弧半径， 
//    context.arcTo(120,30,120,70, 50);
//    context.lineTo(120,120);
//    context.stroke();
    
//    // 擦除canvas 画板
//    context.beginPath();
//    context.fillRect(10,10,200,100);
    
//    // 擦除区域
//    context.clearRect(30,30,50,50);
     //  二次贝塞尔曲线
//      context.beginPath();
//      context.moveTo(100,100);
//      context.quadraticCurveTo(20,50,200,20);
//      context.stroke();
    
     // 三次贝塞尔曲线
//     context.moveTo(68,130);
//     var cX1 = 20;
//     var cY1 = 10;
//     var cX2 = 268;
//     var cY2 = 10;
//     var endX = 268;
//     var endY = 170;
//     context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);
//     context.stroke();
    
    // 利用clip指定绘图区域，指定绘图区域之后，只能在绘图区域中进行绘图擦欧总
    // 绘制圆形
    context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);
    // 限制区域
    context.clip();
    // 开始尝试绘制其他
    context.beginPath();
    context.fillStyle = 'lightblue';
    // 结果矩形并没有显示出来
    context.fillRect(0,0,300,150);
}

转载于:https://my.oschina.net/wangdk/blog/124838