当前位置:网站首页>canvas基础2 - arc - 画弧线
canvas基础2 - arc - 画弧线
2022-07-06 09:21:00 【玲小叮当】
系列文章目录
本文是canvas基础2 - arc - 画弧线,通俗易懂,小白也没烦恼,根据慕课网liuyubobobo老师的视频课学习整理
视频课指路:慕课网 liuyubobobo老师 炫丽的倒计时效果Canvas绘图与动画基础
1、arc方法绘制弧线
context.arc(圆心坐标x,圆心坐标y,半径值,从哪一个弧度值为始,结束弧度,弧度为顺时针还是逆时针默认false为顺时针)
startingAngle
和endingAngle
说明
2、画圆
- 顺时针画圆
<canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">
当前浏览器不支持canvas,请更换浏览器后再试
</canvas>
<script> var canvas = document.getElementById('canvas') canvas.width = 1024 canvas.height = 768 if (canvas.getContext('2d')) {
var context = canvas.getContext('2d') context.lineWidth = 5 context.strokeStyle = '#005588' context.arc(300, 300, 200, 0, 1.5 * Math.PI) context.stroke() } </script>
2. 逆时针画圆
<canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">
当前浏览器不支持canvas,请更换浏览器后再试
</canvas>
<script> var canvas = document.getElementById('canvas') canvas.width = 1024 canvas.height = 768 if (canvas.getContext('2d')) {
var context = canvas.getContext('2d') context.lineWidth = 5 context.strokeStyle = '#005588' context.arc(300, 300, 200, 0, 1.5 * Math.PI, true) context.stroke() } </script>
3、closePath特性
closePath
代表结束这个路径,如果当前路径没有封闭上,会自动封闭这个路径
4、2048棋盘demo
<canvas id="canvas" width="800" height="800" style="display: block; background-color: #eee;margin: 10px auto;">
不能使用canvas
</canvas>
<script> window.onload = function () {
var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // drawRoundRect(context, 10, 10, 600, 500, 50) // fillRoundRect(context, 50, 50, 600, 500, 50, '#500') fillRoundRect(context, 150, 150, 500, 500, 10, '#bbada0') for (var i = 0; i < 4; i++) for (var j = 0; j < 4; j++) fillRoundRect(context, 170 + i * 120, 170 + j * 120, 100, 100, 6, '#ccc0b3') } function drawRoundRect(cxt, x, y, width, height, radius) {
if (2 * radius > width || 2 * radius > height) return; cxt.save() cxt.translate(x, y) pathRoundRect(cxt, width, height, radius) cxt.strokeStyle = '#000' cxt.stroke() cxt.restore() } function fillRoundRect(cxt, x, y, width, height, radius, fillColor) {
if (2 * radius > width || 2 * radius > height) return; cxt.save() cxt.translate(x, y) pathRoundRect(cxt, width, height, radius) cxt.fillStyle = fillColor || '#000' cxt.fill() cxt.restore() } function pathRoundRect(cxt, width, height, radius) {
cxt.beginPath() cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2) cxt.lineTo(radius, height) cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI) cxt.lineTo(0, radius) cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2) cxt.lineTo(width - radius, 0) cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2) cxt.closePath() } </script>
总结
本文为canvas第二节,之后会持续更新,大家感觉还实用的话,关注或者点个赞都可以,谢谢啦
边栏推荐
- [the Nine Yang Manual] 2021 Fudan University Applied Statistics real problem + analysis
- 西安电子科技大学22学年上学期《射频电路基础》试题及答案
- 优先队列PriorityQueue (大根堆/小根堆/TopK问题)
- FAQs and answers to the imitation Niuke technology blog project (I)
- C language to achieve mine sweeping game (full version)
- View UI plus released version 1.3.0, adding space and $imagepreview components
- The latest tank battle 2022 - Notes on the whole development -2
- 3.输入和输出函数(printf、scanf、getchar和putchar)
- 7.数组、指针和数组的关系
- Cloud native trend in 2022
猜你喜欢
强化学习系列(一):基本原理和概念
6. Function recursion
Arduino+ds18b20 temperature sensor (buzzer alarm) +lcd1602 display (IIC drive)
IPv6 experiment
MySQL锁总结(全面简洁 + 图文详解)
FAQs and answers to the imitation Niuke technology blog project (II)
Cloud native trend in 2022
The latest tank battle 2022 full development notes-1
Wei Pai: the product is applauded, but why is the sales volume still frustrated
Quickly generate illustrations
随机推荐
Network layer 7 protocol
JS interview questions (I)
[the Nine Yang Manual] 2018 Fudan University Applied Statistics real problem + analysis
仿牛客技术博客项目常见问题及解答(一)
【毕业季·进击的技术er】再见了,我的学生时代
这次,彻底搞清楚MySQL索引
Comparison between FileInputStream and bufferedinputstream
用栈实现队列
5.MSDN的下载和使用
Redis实现分布式锁原理详解
Miscellaneous talk on May 27
为什么要使用Redis
[modern Chinese history] Chapter 6 test
稻 城 亚 丁
[graduation season · advanced technology Er] goodbye, my student days
最新坦克大战2022-全程开发笔记-2
View UI plus releases version 1.1.0, supports SSR, supports nuxt, and adds TS declaration files
[中国近代史] 第九章测验
There is always one of the eight computer operations that you can't learn programming
Custom RPC project - frequently asked questions and explanations (Registration Center)