- 博客(4)
- 收藏
- 关注
原创 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 309
原创 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 587
原创 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 584
原创 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 260
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人