html5画直线,小白学canvas-从0到1，画直线

canvas意思是“画布”，是使用js动态生成的，基于“位图”，放大会失真，每次修改，都需要重新绘制。

SVG相当于“矢量图”，是使用XML静态描述的。

canvas坐标系

数学坐标系：y轴向上

W3C坐标系：y轴向下

绘制直线

body中定义画布

canvas的宽度和高度要在HTML属性中定义，默认宽度为300px，高度为150px。

script中先获取ID，

然后使用getContext("2d")获取canvas 2D上下文环境对象，

接下来定义直线的起始点moveTo()，终止点lineTo(),使用stroke()进行绘制，

如果要继续绘制就接着写lineTo()，默认起始点为上一段终止点。

HTML5 canvas暂时只提供2D绘图API，所以getContext("2d") 中2d改为3d也不能实现3d绘图，BUT！3D可用WebGL进行开发，HTML5中的黑科技。

Document

//封装

function $$(id){

return document.getElementById(id);

}

//提取

window.οnlοad=function(){

var cnv=$$("canvas");

var cxt=cnv.getContext("2d");

//绘制直线

cxt.moveTo(50,100);

cxt.lineTo(150,50);

cxt.lineTo(150,100);

cxt.stroke();

}

ヾ(✿ﾟ▽ﾟ)ノ

html5画直线,小白学canvas-从0到1，画直线相关推荐

编程金融小白学股票期权 lv.0 基本概念
文章目录编程金融小白学股票期权基本概念什么是期权? 认购期权认沽期权 Python 期权类买入认购线性图买入认沽线性图卖出认购线性图卖出认沽线性图期权线性图合约要素实值,虚值与 ...
bitmap画文字居中_Android Canvas Matrix —— Bitmap是如何画出来的
上一篇<Android Canvas Matrix -- 从CircleImageView说起>是我对CircleImageView项目的学习和思考,这篇说一下从"绘制圆形头像& ...
python画简便的图-最适合小白学的花色玩Python折线图|画个天气预报
原标题:最适合小白学的花色玩Python折线图|画个天气预报欢迎关注天善智能 hellobi.com,我们是专注于商业智能BI,大数据,数据分析领域的垂直社区,学习.问答.求职,一站式搞定! 对商业 ...
python折线图多个颜色_最适合小白学的花色玩Python折线图|画个天气预报
这是菜鸟学Python的第102篇原创文章阅读本文大概需要3分钟前面写一篇关于数据可视化的入门开篇,简单的介绍了一下Matplotlib的使用(小白开始学Python最著名的绘图库),今天我们进一 ...
python画双折线图-最适合小白学的花色玩Python折线图|画个天气预报
原标题:最适合小白学的花色玩Python折线图|画个天气预报这是菜鸟学Python的第102篇原创文章前面写一篇关于数据可视化的入门开篇,简单的介绍了一下Matplotlib的使用(),今天我们进 ...
HTML5两个画布如何弄,有趣html5（两）----使用canvas结合剧本画在画布上的简单图（html5另一个强大）...
请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...
python画鸟_最适合小白学的花色玩Python折线图|画个天气预报
前面写一篇关于数据可视化的入门开篇,简单的介绍了一下Matplotlib的使用(小白开始学Python最著名的绘图库),今天我们进一步来探索一下Matplotlib到底能画哪些图,怎么画呢,其实常见的 ...
【小白学PyTorch】扩展之Tensorflow2.0 | 21 Keras的API详解（下）池化、Normalization
<<小白学PyTorch>> 扩展之Tensorflow2.0 | 21 Keras的API详解(上)卷积.激活.初始化.正则扩展之Tensorflow2.0 | 20 TF ...
【小白学PyTorch】扩展之Tensorflow2.0 | 21 Keras的API详解（上）卷积、激活、初始化、正则...
[机器学习炼丹术]的学习笔记分享 <<小白学PyTorch>> 扩展之Tensorflow2.0 | 20 TF2的eager模式与求导扩展之Tensorflow2.0 | ...

html5画直线,小白学canvas-从0到1，画直线

html5画直线,小白学canvas-从0到1，画直线相关推荐

最新文章

热门文章