切换导航
首页
技术问答
编程语言
前端开发
移动开发
开发工具
程序设计
行业应用
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 详细使用教程
，
前端之家
小编觉得挺不错的，现在分享给大家，也给大家做个参考。
话不多说，请看
代码
@H_
502
_14@
画矩形
@H_
502
_14@
清除矩形
@H_
502
_14@
绘制路径
@H_
502
_14@
画圆()
@H_
502
_14@
画线test(lineTo moveTo)
@H_
502
_14@
画线demo(lineTo moveTo)
@H_
502
_14@
贝塞尔曲线test（bezierCurveTo）
@H_
502
_14@
贝塞尔曲线demo（bezierCurveTo）
@H_
502
_14@
线性test（createLinearGradient addColorStop）
@H_
502
_14@
线性demo（createLinearGradient addColorStop）
@H_
502
_14@
发散test（createRadialGradient）
@H_
502
_14@
发散demo（createRadialGradient）
@H_
502
_14@
平移 test（translate）缩放（scale） 旋转（rotate）
@H_
502
_14@
平移 demo（translate）缩放（scale） 旋转（rotate）
@H_
502
_14@
坐标与路径的结合使用
@H_
502
_14@
矩阵变换
@H_
502
_14@
图形组合叠加(globalCompositeOperation)
@H_
502
_14@
给图像绘制阴影test shadowOffsetX(阴影的横向位移量) shadowOffsetY(盈盈的纵向位移量) shadowColor（阴影的颜色） shadowBlur（阴影的模糊范围）
@H_
502
_14@
给图像绘制阴影demo shadowOffsetX(阴影的横向位移量) shadowOffsetY(盈盈的纵向位移量) shadowColor（阴影的颜色） shadowBlur（阴影的模糊范围）
@H_
502
_14@
绘制图像drawImage(image,y)
@H_
502
_14@
绘制图像drawImage(image,h)
@H_
502
_14@
绘制局部图像drawImage(image,dh)
@H_
502
_14@
图像平铺
@H_
502
_14@
图像裁剪clip
@H_
502
_14@
像素处理getImageData
@H_
502
_14@
绘制
文字
fillText strokeText
@H_
502
_14@
绘图状态的保存save与恢复restore
@H_
502
_14@
保存
文件
canvas.toDataURL
@H_
502
_14@
简单动画
