切换导航
首页
技术问答
编程语言
前端开发
移动开发
开发工具
程序设计
行业应用
CMS系统
服务器
频道导航
▸ PHP
▸ Java
▸ Java SE
▸ Python
▸ C#
▸ C&C++
▸ Ruby
▸ VB
▸ asp.Net
▸ Go
▸ Perl
▸ netty
▸ Django
▸ Delphi
▸ Jsp
▸ .NET Core
▸ Spring
▸ Flask
▸ Springboot
▸ SpringMVC
▸ Lua
▸ Laravel
▸ Mybatis
▸ Asp
▸ Groovy
▸ ThinkPHP
▸ Yii
▸ swoole
▸ HTML
▸ HTML5
▸ JavaScript
▸ CSS
▸ jQuery
▸ Bootstrap
▸ Angularjs
▸ TypeScript
▸ Vue
▸ Dojo
▸ Json
▸ Electron
▸ Node.js
▸ extjs
▸ Express
▸ XML
▸ ES6
▸ Ajax
▸ Flash
▸ Unity
▸ React
▸ Flex
▸ Ant Design
▸ Web前端
▸ 微信小程序
▸ 微信公众号
▸ iOS
▸ Android
▸ Swift
▸ Hybrid
▸ Cocos2d-x
▸ Flutter
▸ Xcode
▸ Silverlight
▸ cocoa
▸ Cordova
前端之家
JavaScript
html5 canvas 详细使用教程
html5 canvas 详细使用教程
2019-01-07
JavaScript
前端之家
前端之家
收集整理的这篇文章主要介绍了
html5 canvas 详细使用教程
，
前端之家
小编觉得挺不错的，现在分享给大家，也给大家做个参考。
话不多说，请看
代码
画矩形
清除矩形
绘制路径
画圆()
画线test(lineTo moveTo)
画线demo(lineTo moveTo)
贝塞尔曲线test（bezierCurveTo）
贝塞尔曲线demo（bezierCurveTo）
线性test（createLinearGradient addColorStop）
线性demo（createLinearGradient addColorStop）
发散test（createRadialGradient）
发散demo（createRadialGradient）
平移 test（translate）缩放（scale） 旋转（rotate）
平移 demo（translate）缩放（scale） 旋转（rotate）
坐标与路径的结合使用
矩阵变换
图形组合叠加(globalCompositeOperation)
给图像绘制阴影test shadowOffsetX(阴影的横向位移量) shadowOffsetY(盈盈的纵向位移量) shadowColor（阴影的颜色） shadowBlur（阴影的模糊范围）
给图像绘制阴影demo shadowOffsetX(阴影的横向位移量) shadowOffsetY(盈盈的纵向位移量) shadowColor（阴影的颜色） shadowBlur（阴影的模糊范围）
绘制图像drawImage(image,y)
绘制图像drawImage(image,h)
绘制局部图像drawImage(image,dh)
图像平铺
图像裁剪clip
像素处理getImageData
绘制
文字
fillText strokeText
绘图状态的保存save与恢复restore
保存
文件
canvas.toDataURL
简单动画
