-
圆心位置在最有
// context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
查看全部 -
状态设置 和 绘制，现有状态，在去绘制
moveTo，把一直笔放到了 这个位置
lineTo 滑到那个位置
原点的位置 是左上角 向左-> 向下
查看全部 -
// canvas绘制是基于状态进行绘制的；
//1. 定义路径context.moveTo(0,0)context.lineTo(200, 200)
//2. 定义多个路径，使用context.beginPath() context.closePath()分割
//3. 使用context.lineWidth context.strokeStyle context.fillStyle 设置线段的宽度，线段颜色，填充颜色
//4. 使用 contxt.stroke()绘制线段；使用context.fill()填充颜色
查看全部 -
哈哈，画了一个没什么用的圆
window.onload = function () { const canvas = document.getElementById("canvas") const context = canvas.getContext('2d') context.lineWidth = 6 const count = 100 let p =0 let n =0.12 * Math.PI for (let i = 0; i <= count; i++) { const r = Math.floor(Math.random() * 255) const g = Math.floor(Math.random() * 255) const b = Math.floor(Math.random() * 255) const c = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}000` context.beginPath() context.arc(330, 300, 200, p , n,) context.strokeStyle = c.slice(0, 7) p = n n =2 * Math.PI*(i+1)/count context.stroke() } }查看全部 -
11111111111111111111111111111
查看全部 -
111111111111
查看全部 -
2222222222222222222222
查看全部 -
2222222222222222222222
查看全部 -
创建canvas笔记 ：
查看全部 -
111111111111111111
查看全部 -
动画
更加精确的动画
查看全部 -
碰撞检测查看全部
-
总结-Context
查看全部 -
Render a digit原理图
查看全部 -
接上次……
查看全部 -
canvas html base
查看全部 -
数字显示原理
查看全部 -
arc多例效果
查看全部 -
arc代码2
查看全部 -
arc代码例子
查看全部 -
Draw an arc
查看全部 -
Draw an arc
查看全部 -
Draw复习
查看全部 -
绘制两个图形的代码
查看全部 -
绘制三角形
查看全部 -
Canvas基本代码
查看全部
举报
0/150
提交
取消