继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

canvas绘图基础不懂怎么行?!

Weboey
关注TA
已关注
手记 2
粉丝 3
获赞 50

/创建canvas : /

var canvas = document.getElementById("myCanvas");

//建议使用width,height属性设置画布的太小,而样式设置宽高仅仅是画布的显示区域,不包括画布的分辨率
canvas.width=824;
canvas.height=668;
var context = canvas.getContext("2d"); //绘图的上下文环境

    /*绘制直线:Draw a line */
    context.moveTo(100,100); //起点  、、状态设置
    context.lineTo(700,700); //终点  、、状态设置
    context.lineTo(100,700); //终点  、、状态设置
    context.lineTo(100,100); //终点  、、状态设置
    //填充
    context.fillStyle="rgb(2,100,30)"
    context.fill();
    //描边
    context.lineWidth = 5;
    context.strokeStyle = "#005588"
    context.stroke(); //绘图是基于状态的,绘制
    context.closePath(); // 结束路径
    context.beginPath();// 开始路径

    /*绘制圆和弧线*/
    context.arc(300,300,200,0,1.5*Math.PI);
    context.stroke();
打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP