Html5 canvas
来源:互联网 发布:玉伯 数组去重 编辑:程序博客网 时间:2024/06/11 19:18
Html5是新一代的html标准,它能更完美的契合js和css样式,其中的canvas标签能更方便的画出想要的图形。
下面就是canvas的一些简单应用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>综合案例</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<canvas id="can" style="height:500px;width:500px;border:1px solid black;">
</canvas>
<script>
//利用DOM得到canvas画布
var can1=document.getElementById("can");
//得到画笔(除了矩形,其余所有图形都需要beginPath()、closePath())
var ctx=can1.getContext("2d");
//画直线:
//开始路径
ctx.beginPath();
//定义起点
ctx.moveTo(20,20);
//定义终点
ctx.lineTo(20,50);
//结束路径
ctx.closePath();
//画线
ctx.stroke();
//画矩形(通过fillStyle改变填充颜色):
ctx.fillStyle="blue";
ctx.fillRect(40,20,50,50);
//画圆:arc(x,y,radio(半径),起始弧度,结束弧度,逆/顺时针旋转)
ctx.beginPath()
ctx.arc(120,40,20,0,360);
ctx.closePath();
ctx.fill();
//画三角形:
ctx.beginPath();
//定义第一个顶点
ctx.moveTo(150,20);
//定义第二个顶点
ctx.lineTo(150,40);
//定义第三个顶点
ctx.lineTo(200,40);
ctx.closePath();
ctx.stroke();
//画字体:
ctx.font="30px Arial";
ctx.fillStyle="red";
ctx.fillText("hello",0,120);
//画图片
var img=new Image();
img.src="fss.png";
ctx.drawImage(img,120,120,80,80);
</script>
</body>
</html>
- html5 canvas
- html5-canvas
- HTML5 canvas
- html5 canvas
- HTML5 Canvas
- HTML5 Canvas
- html5 canvas
- HTML5 Canvas
- HTML5--Canvas
- HTML5 Canvas
- HTML5 canvas
- HTML5-canvas
- HTML5 Canvas
- html5 canvas
- html5-canvas
- html5---canvas
- html5 canvas
- HTML5 Canvas
- Action委托类型
- 关于剑指offer上“从1到n整数中1出现的次数”题的理解
- 图片Base64编码和解码
- du,touch,cp,mv,rm,file,alias,echo,$
- 大数据预科班8
- Html5 canvas
- eclipse安装Hibernate
- JavaScript执行环境和内存管理 学习总结02
- 如何做好用户运营
- 集合
- Scala基本语法学习
- SSH的电商系统(javaweb)
- 多线程的三种实现方法
- mininet fattree 拓扑的构建