canvas实例(基础)
2024-09-04 11:35:26
JS实现五子棋大战:GitHub源码
知识点总结:
第一步、基础:
//获取canvas
var chess = document.getElementById('chess'); //获取上下文,创建上下文对象
var context = chess.getContext('2d');
canvas绘制直线、设置画笔颜色
//设置画笔颜色
context.strokeStyle = '#bfbfbf'; context.moveTo(0, 0);
context.lineTo(450, 450);
//画线
context.stroke();//描边
canvas画圆、填充渐变色
//画圆
context.beginPath();
context.arc(200, 200, 100, 0, 2*Math.PI);
context.closePath();
context.fill(); //填充 //实现渐变
//gradient是一个渐变对象
var gradient = context.createRadialGradient(200, 200, 50, 200, 200, 20); gradient.addColorStop(0, '#0A0A0A');
gradient.addColorStop(1, '#636766'); context.fillStyle = gradient;
最新文章
- 跨域请求解决方法(JSONP, CORS)
- Android ViewPager 用法
- NanoProfiler - 适合生产环境的性能监控类库 之 基本功能篇
- checkbox的三种状态处理
- 不允许调用库函数,也不允许使用任何全局或局部变量编写strlen函数
- Multi-catch
- HTML5中的服务器‘推送’技术 -Server-Sent Events
- Android Studio非gradleproject编译后的apk文件在哪?
- 清理mac的硬盘空间,清理Xcode,清除“其他”
- 电脑移动后WIFI连接失败解决方法
- 利用Google趋势来预测比特币价格 - 续1
- asp.net DES加密解密
- flask 过滤器
- https原理简析
- React中jquery引用
- VS2015 添加web服务(电子看板)
- Android开发教程 - 使用Data Binding(八)使用自定义Interface
- redis-小用
- 小慢歌之基于RHEL8/CentOS8的网络IP配置详解
- linux下更改主机名方法hostname
热门文章
- 前三次OO作业总结
- shiro 的简单应用
- 【Leetcode】Permutation Sequence
- php 中 ?? 和 empty 的 区别
- Clover笔记
- C语言指针收藏
- 练习五十七:for循环 809??=800*?+9*?+1其中?代表的两位数,8*?的结果为两位数,9*?的结果为3位数。求?代表的两位数,及809??后的结果
- import与export
- 修改Matlab打开时的默认路径
- jQuery中的事件和动画 以及视频展示效果实例