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')
// 获取绘图API
var 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>
canvas 画正方形和圆形的更多相关文章
- HTML5之Canvas画正方形
HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...
- HTML5之Canvas画圆形
HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...
- 撩妹技能 get，教你用 canvas 画一场流星雨
开始 妹子都喜欢流星,如果她说不喜欢,那她一定是一个假妹子. 现在就一起来做一场流星雨,用程序员的野路子浪漫一下. 要画一场流星雨,首先,自然我们要会画一颗流星. 玩过 canvas 的同学,你画圆画 ...
- Android利用canvas画各种图形
Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...
- 深夜，用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- Canvas 画圆
原文地址:http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b --------------------------------------- ...
- 使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
- canvas 画圈 demo
html代码: <canvas id="clickCanvas2" width="180" height="180" data-to ...
- 踩个猴尾不容易啊 Canvas画个猴子
踩个猴尾不容易啊 Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
随机推荐
- 关于Python获取图片文件二进制数据的问题(获取为空)
在搭建fastdfs文件系统的时候遇到了点问题,在测试上传文件数据流的时候,需要Python来获取本地文件的二进制流 from fdfs_client.client import Fdfs_clien ...
- join优化
1.left outer join先执行连接操作,再将结果通过WHERE语句进行过滤 select s.ymd,s.symbol,s.price_close,d.dividend from stock ...
- html5 新增的页面 元素
figure 和 figcaption元素 test.html <!DOCTYPE html> <html lang="en"> <head> ...
- AIX系统软件安装问题
一.安装软件时一定要cd到介质目录中 二.选择accept new licence 三.更新系统时避免使用updata_all,要手动选择出要更新的软件 四.oracle11G的rac还要用到open ...
- tuple拆包操作
""" tuple 是不可变对象 """ user_tuple = ('admin', 18, "cd", " ...
- centos6.5安装nginx1.16.0
参考: centos7 编译安装nginx1.16.0( 完整版 ) https://blog.csdn.net/weixin_37773766/article/details/80290939 ...
- vue子组件获取父组件的数据
- Codeforecs Round #425 D Misha, Grisha and Underground （倍增LCA）
D. Misha, Grisha and Underground time limit per test 2 seconds memory limit per test 256 megabytes i ...
- 拒绝从入门到放弃_《Openstack 设计与实现》必读目录
目录 目录 关于这本书 必看知识点 最后 关于这本书 <Openstack 设计与实现>是一本非常值得推荐的书,为数不多的 Openstack 开发向中文书籍中的精品.如果希望从事 Ope ...
- Linux_Bash常用脚本
目录 目录 从用户列表中过滤用户名并创建用户 awktrcut 指令的文本处理 tr指令 cut指令 awk指令 备份文件 测试LFTPServer权限设定 开启Httpd 安装Httpd 批量创建用 ...