为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Html5

/创建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();
点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
3
获赞与收藏
50

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消