当前位置:网站首页>Canvas foundation 2 - arc - draw arc
Canvas foundation 2 - arc - draw arc
2022-07-06 13:50:00 【Ling Xiaoding】
List of articles
This article is about canvas Basics 2 - arc - Draw arc , Easy to understand , Xiaobai has no trouble , According to MOOCS liuyubobobo The teacher's video lesson learning and sorting
Video lesson guide : For class network liuyubobobo teacher Gorgeous countdown effect Canvas Fundamentals of drawing and animation
List of articles
1、arc Method to draw an arc
context.arc( The coordinates of the center of the circle x, The coordinates of the center of the circle y, Radius value , Which radian value to start from , End arc , Whether the radian is clockwise or counterclockwise defaults false For clockwise )
startingAngle
andendingAngle
explain
2、 A circle
- Draw a circle clockwise
<canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">
The current browser does not support canvas, Please change your browser and try again
</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. Draw a circle counterclockwise
<canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">
The current browser does not support canvas, Please change your browser and try again
</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 characteristic
closePath
Represents the end of this path , If the current path is not closed , Will automatically close this path
4、2048 The board demo
<canvas id="canvas" width="800" height="800" style="display: block; background-color: #eee;margin: 10px auto;">
Out of commission 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>
summary
This paper is about canvas In the second quarter , After that, it will continue to update , If you feel it is still practical , It's OK to follow or like , Thank you very much!
边栏推荐
- FAQs and answers to the imitation Niuke technology blog project (I)
- Custom RPC project - frequently asked questions and explanations (Registration Center)
- C语言入门指南
- [the Nine Yang Manual] 2017 Fudan University Applied Statistics real problem + analysis
- 自定义RPC项目——常见问题及详解(注册中心)
- [中国近代史] 第九章测验
- 【VMware异常问题】问题分析&解决办法
- [modern Chinese history] Chapter 9 test
- 【数据库 三大范式】一看就懂
- Implementation of count (*) in MySQL
猜你喜欢
C language Getting Started Guide
The latest tank battle 2022 - Notes on the whole development -2
(原创)制作一个采用 LCD1602 显示的电子钟,在 LCD 上显示当前的时间。显示格式为“时时:分分:秒秒”。设有 4 个功能键k1~k4,功能如下:(1)k1——进入时间修改。
这次,彻底搞清楚MySQL索引
1. First knowledge of C language (1)
Leetcode. 3. Longest substring without repeated characters - more than 100% solution
实验六 继承和多态
Using spacedesk to realize any device in the LAN as a computer expansion screen
1.C语言初阶练习题(1)
2. C language matrix multiplication
随机推荐
Why use redis
[中国近代史] 第五章测验
简单理解ES6的Promise
实验四 数组
优先队列PriorityQueue (大根堆/小根堆/TopK问题)
[modern Chinese history] Chapter 9 test
【九阳神功】2019复旦大学应用统计真题+解析
This time, thoroughly understand the MySQL index
MySQL lock summary (comprehensive and concise + graphic explanation)
MySQL事务及实现原理全面总结,再也不用担心面试
Wechat applet
Using qcommonstyle to draw custom form parts
实验五 类和对象
渗透测试学习与实战阶段分析
SRC mining ideas and methods
Write a program to simulate the traffic lights in real life.
7-14 错误票据(PTA程序设计)
实验八 异常处理
记一次猫舍由外到内的渗透撞库操作提取-flag
【九阳神功】2017复旦大学应用统计真题+解析