- 博客(4)
- 收藏
- 关注
RSS订阅原创 Canvas学习 清除画布、画圆与小球相撞实验
首先依旧是创建一个canvas标签然后获取canvas和它的上下文var canvas = document.querySelector('#mycanvas')var ctx = canvas.getContext('2d')清除画布：没什么可说的，就是记住一下它的方法就行，后面经常要用到，要熟记clearRect(x,y,width,height);画圆：arc(x,y,r,start,end,true/flase)r是半径 start是圆的起始点，end是.
2022-05-05 20:33:04
271
原创 Canvas 画随机统计图
开始两步依旧不变： var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d');先学习画矩形，然后再画随机统计图： 先定义一个x,y坐标图形 ctx.beginPath(); ctx.moveTo(100,100); ctx.lineTo(100,400); ctx.line...
2022-05-04 20:42:08
538
原创 Canvas学习 直线连用和画虚线
Canvas中的前两步是固定不变的 ：获取canvas： var canvas = document.querSelector('#canvas'); (不论用什么方法，获取到就行)定义画布上下文 var ctx = canvas.getContext('2d')示例：画一个边框然后还是定义一个路径，画线的时候路径是必不可少的ctx.beginPath();定义开始的位置ctx.moveTo(100,100);然后开始直线连用，所谓直线连用，就是一直利用结束的位置进行的连
2022-05-04 20:10:55
565
原创 Canvas学习
Canvas在低版本的IE浏览器不兼容，需要提示用户 Canvas可以当作一个有特殊功能的DIV盒子需要设置宽高，他是一个行内元素，需要加上display:block;Canvas只能使用原生JS ,JQurey不生效Canvas 画直线的步骤：1、需要获取到Canvas画布 : var Canvas = document.getElementById('canvas');2、得到画布的上下文: var c = canvas.getContext('2d');3、定义一条路径 c.b
2022-05-03 20:40:31
227
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人