- 博客(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
340
原创 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
622
原创 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
611
原创 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
288
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人