canvas实际项目操作,包含:线条,圆形,扇形,图片绘制,图片圆角遮罩,矩形,弧形文字

学完我写的上一章小白上学canvas基础,我们就来这里现学现用了。这里先看我们的设计图和最终实现效果;
左面是设计稿,右面是完成后的效果图:

canvas实际项目操作,包含:线条,圆形,扇形,图片绘制,图片圆角遮罩,矩形,弧形文字_第1张图片
没办法和原图一模一样。文字下方数字正的,我的是倒着的;
此图难点:扇形,圆形头像,弧形文字
话不多说直接上代码:




    
    Document



   

上面的代码直接复制进你的html文件里打开就能看到效果。
注意事项:
开始时按240像素大小的画布写,最后发现放在分辨率高的手机上全是锯齿,所以最后采用960的宽高来写。
绘制完图片(头像)会覆盖整个画布,所以图片得最后绘制。
弧形文字需要一点一旦调整弧度。
留言:如有疑问关注我给我留言,我们一起成为大牛!

你可能感兴趣的:(canvas实际项目操作,包含:线条,圆形,扇形,图片绘制,图片圆角遮罩,矩形,弧形文字)