作者:水_-晶_522 | 来源:互联网 | 2020-08-14 07:49
《后盾网HTML5视频教程》是现在以及未来一项重要的技术,学好HTML5不仅可以让你开发WEB前端界面,设计出能够适应各种尺寸设备的网页;甚至可以让你使用HTML5技术开发出HybirdApp(一种混合式开发AndroidiOSWindowsPhone等设备的应用);或者用HTML5技术开发出桌面程序(参看NodeWebkit项目,请自行Github)。
《后盾网HTML5视频教程》是现在以及未来一项重要的技术,学好HTML5不仅可以让你开发WEB前端界面,设计出能够适应各种尺寸设备的网页;甚至可以让你使用HTML5技术开发出Hybird App(一种混合式开发Android/iOS/Windows Phone等设备的应用);或者用HTML5技术开发出桌面程序(参看Node Webkit项目,请自行Github)。
2.3 绘图
使用Javascript中提供的绘图API来绘制
每个canvas都有一套绘图的API(工具)
2.3.1 绘图的基本步骤
1 找到canvas画布
2 通过canvas拿到绘图上下文(一系列的API集合)
3 使用API绘制需要的图形
// 1 找到canvas
var cv = document.getElementById("canvasId");
// 2 拿到canvas绘图上下文
var ctx = cv.getContext("2d");
// 3 使用上下文中的API绘制图形
ctx.moveTo(100, 100); // 将画笔移动到 100,100 的位置
ctx.lineTo(200, 100); // 从 100,100 到 200,100 画一条线段
ctx.stroke(); // 描边
注意点:
getContext("2d"), 参数`2d`是指获取到绘制平面图形的上下文;
如果想绘制立体图形,需要传入参数:"webgl"
2d上下文类型:CanvasRenderingContext2D
获得 webgl 上下文:(了解)
var cCv = document.createElement("canvas");
console.log(cCv.getContext("webgl"));
以上就是后盾网HTML5视频教程的详细内容,更多请关注 第一PHP社区 其它相关文章!