博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5中的Canvas路径
阅读量:5041 次
发布时间:2019-06-12

本文共 720 字,大约阅读时间需要 2 分钟。

画图也就是我们拿着笔在一张白纸上画图片一样,区别在与这支笔变成了canvas了。

我们平时画图想到什么画什么,可以涂鸦随便怎么样,那么可以开始了。

画图需要白纸吧,于是:(一些基本的用法我就不介绍了)

<canvas id="canvas" width="500" height="500"></canvas>

这个就是了。了。有了白纸就要有拿起笔吧,那么:

var canvas=document.getElementById("canvas"),

context = canvas.getContext("2d");

既然画图那么我们就要有想法画什么?有闭合的不闭合的复杂的简单的等等,本章就是介绍路径,那么我就简单的了。

cxt.beginPath();开始绘制

当我们落笔的时候,首先不是产生一个点吧,于是就有了:

moveTo(x,y);这个方法就是落笔点了。

笔滑动的时候不就产生路径了,但总有终点吧,也就是一个点,于是有了:

context.lineTo(150, 10);这个方法就是落笔终点了。

但是我们用的canvas呀,于是需要一个显示:

context.stroke();这就是描边了

context.fill();这就是填充了,这个我以前的博客有提过填充原理可以去看看。网址:http://www.cnblogs.com/jristy/p/4069987.html

如果要闭合的就需要调用:

context.closePath();

  如果您发现这篇文章的内容误导人或者违法了相关法律,请给我留言。菜鸟在此,不多说了

 

转载于:https://www.cnblogs.com/jristy/p/4164382.html

你可能感兴趣的文章
一位数据挖掘成功人士 给 数据挖掘在读研究生 的建议
查看>>
Python3.6.0安装
查看>>
hdu1049
查看>>
H5项目常见问题及注意事项
查看>>
索尼(SONY) SVE1512S7C 把WIN8降成WIN7图文教程
查看>>
时间模块 && time datetime
查看>>
jquery自动生成二维码
查看>>
spring回滚数据
查看>>
新浪分享API应用的开发
查看>>
美国专利
查看>>
【JavaScript】Write和Writeln的区别
查看>>
百度编辑器图片在线流量返回url改动
查看>>
我对你的期望有点过了
查看>>
微信小程序wx:key以及wx:key=" *this"详解:
查看>>
下拉框比较符
查看>>
2.2.5 因子的使用
查看>>
css选择器
查看>>
photoplus
查看>>
Python 拓展之推导式
查看>>
[Leetcode] DP-- 474. Ones and Zeroes
查看>>