canvas 画正方形和圆形

绘制正方形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>canvas{background-color: pink;}</style>
</head>
<body><!-- 画布标签 --><canvas width="600" height="400"></canvas><!-- canvas 是h5新增的画布标签，默认300*150  在IE 6 7 8下都不能用 有兼容性cnavas 自身并不具备绘图的功能如果在canvas上面进行绘制，需要获取canvas相关的API，通过canvas API进行绘制canvas 可以用于 游戏  数据可视化（数据图表）--><script>// 绘制正方形// 获取canvas标签var cs=document.querySelector('canvas')// 获取canvas绘图上下文(canvas绘图的相关API)var ctx=cs.getContext('2d')// 绘图// 01 移动画笔moveTo(x,y) 坐标
            ctx.moveTo(100,100)// 02 划线  坐标
            ctx.lineTo(300,100)ctx.lineTo(300,300)ctx.lineTo(100,300)ctx.lineTo(100,100)// 以上两行代码只是一个路径，但还没有绘制// 03 绘制
            ctx.stroke()</script>
</body>
</html>

圆形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>canvas{background-color: pink;}</style>
</head>
<body><canvas width="500"  height="500"></canvas><script>// <!-- 获取标签 -->var cs=document.querySelector('canvas')// 获取绘图APIvar ctx=cs.getContext('2d')// 绘制园// arc(x,y,r,star,end,isNI)// x y坐标   r半径     star起始弧度  end终止弧度  isNI是否逆时针// 角度和弧度的关系  角度/180=弧度/pI// 弧度=角度/180*PI
            ctx.arc(100,100,60,0,360/180*Math.PI)
            ctx.stroke()</script></body>
</html>

转载于:https://www.cnblogs.com/javascript9527/p/11397160.html

canvas 画正方形和圆形相关推荐

html 绘制正方形,HTML5之Canvas画正方形
HTML5之Canvas画正方形 1.设计源码 HTML5之Canvas画正方形 function drawFour(id) { //获取canvas元素 var canvas = document. ...
使用canvas画三角形，圆形，半圆，八卦
1,三角形 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8 ...
canvas画正方形、三角形以及虚线
1.画正方形代码如下 <style>canvas {margin: 0 auto;border: 2px solid #aaa;display: block; /*画布居中*/} < ...
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
python画正方形-用python画正方形
广告关闭腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! 我正在学习python学习教程,我无法打开屏幕进行绘图. 我没有发现错误,它只是 ...
H5画布 canvas（一）canvas简介、绘制圆形矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
用python的turtle画正方形内切圆_Python 用turtle实现用正方形画圆的例子
最近发现一个很有意思的画图的python库,叫做turtle,这里先说下用turtle这个库来实现用正方形画圆的思路. 每次都用乌龟(turtle) 来画出一个正方形,然后通过旋转3°后,继续画一样的 ...
canvas画圆又毛边
canvas画圆又毛边 canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang=&q ...
html5 canvas画椭圆形
在canvas中可以很方便的用arc方法画出圆形,本来圆形也可以看作是一个宽高相等的椭圆,但canvas中根本没有画椭圆的方法,我们要用其他方法来模拟. 我们首先要明确画一个椭圆需要那些参数,基本的几 ...

canvas 画正方形和圆形

canvas 画正方形和圆形相关推荐

最新文章

热门文章