html5之canvas

苏丹发布于2019-08-26 13:43 / 1039人阅读

摘要：是新加的标签，主要有和，的应用是动画和图像，的应用是游戏渲染。

HTML5 Canvas

canvas是html5新加的标签，主要有2D和3D，2D的应用是动画和图像，3D的应用是游戏渲染。

1. 2D基础 1.1绘制线




    
    
    
    canvas

1.3 绘制矩形




    
    
    
    canvas

1.4 绘制圆




    
    
    
    canvas

1.5 绘制文字




    
    
    
    canvas

1.6 表格练习




    
    Canvas绘制表格

2. canvas动画 2.1动画原理

//requestAnimationFrame会根据刷新频率自动调用callback
(function drawFrame(){
   window.requestAnimationFrame(drawFrame, canvas);
}());

2.2进度条练习




    
    canvas动画

2.3弹动小球练习




    
    ball animate

3.canvas图像 3.1基础api




    
    ball animate

3.2canvas放大镜效果练习

3.3canvas缩放效果练习

3.4canvas水印效果练习

3.4canvas滤镜效果练习




    
    



    
        

        
    
    

    
        Grey Effect
        Black and White Effect
        Reverse Effect
        Blur Effect
        Mosaic Effect

在使用上面的代码的时候会有跨域问题，解决方法如下：
npm install http-server -g
http-server -p 8081

canvas应用的场景有很多，写这篇文章参考了很多别人的总结，链接放在下面大家去看看：

炫丽的倒计时效果Canvas绘图与动画基础：https://www.imooc.com/learn/133
Canvas绘图详解：https://www.imooc.com/learn/185
Canvas玩转图像处理：https://www.imooc.com/learn/476

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109382.html

html5之canvas

摘要：是出现的新标签，主要用来画图，看见网上能用来实现各种图形，所以感觉很好玩，就学习了一下。 canvas是html5出现的新标签，主要用来画图，看见网上能用来实现各种图形，所以感觉很好玩，就学习了一下。canvas绘制图形有两种方法： context.fill() //填充 context.stroke() //绘制边框在绘制图形...

ygyooo 2019-08-29 10:56 评论0 收藏0
html5之canvas

摘要：是出现的新标签，主要用来画图，看见网上能用来实现各种图形，所以感觉很好玩，就学习了一下。 canvas是html5出现的新标签，主要用来画图，看见网上能用来实现各种图形，所以感觉很好玩，就学习了一下。canvas绘制图形有两种方法： context.fill() //填充 context.stroke() //绘制边框在绘制图形...

TalkingData 2019-08-19 18:42 评论0 收藏0