[HTML5] Canvas绘制简单形状
使用canvas来进行绘画，它像很多其他dom对象一样，有很多属性和方法，操作这些方法，实现绘画
获取canvas对象，调用document.getElementById()方法
调用canvas对象的getContext()方法，获取context对象，参数：String的”2d”
绘制线段
调用context对象的moveTo()方法，把起点位置定义好，参数：x，y
调用context对象的lineTo()方法，把终点位置定义好，参数：x，y
调用context对象的stroke()方法，画一条线
如果不调用moveTo()方法，起点的位置是上次的点
绘制矩形
调用context对象的fillRect()方法，填充矩形，参数：起点横坐标，起点纵坐标，宽度，高度
调用context对象strokeRect()方法，边框矩形，参数：起点横坐标，起点纵坐标，宽度，高度
例如：context.fillRect(0,0,100,100); 会画出一个黑色的矩形
注意：html5 canvas fillRect坐标和大小一直不对，是因为canvas的宽度和高度必须内联在canvas标签中才对
绘制扇形
调用context对象的beginPath()方法，开启路径
调用context对象的moveTo()方法，把路径移动到圆心位置，参数：x，y
调用context对象的arc()方法，绘制圆弧，参数：圆心x坐标，圆心y坐标，开始角度，结束角度
调用context对象的closePath()方法，关闭路径
调用context对象的fill()方法，填充颜色
绘制贝塞尔曲线
调用context对象的bezierCurveTo()方法，绘制曲线路径，
参数：第一控制点x，第一控制点y，
第二控制点x，第二控制点y，
最终控制点x，最终控制点y
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试canvas</title>
</head>
<body>
<canvas id="myCanvas" width="500px" height="1000px"></canvas>
<script>
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext("2d"); //绘制矩形
context.fillRect(0,0,100,100);
context.strokeRect(120,0,100,100); //绘制扇形
context.beginPath();
context.moveTo(50,220);
context.arc(50,220,50,0,Math.PI/4);
context.closePath();
context.fill(); //绘制线段
context.moveTo(0,300);
context.lineTo(100,300);
context.lineTo(100,400);
context.stroke(); //绘制贝塞尔曲线
context.moveTo(200,300);
context.bezierCurveTo(200,300,250,300,300,400);
context.stroke();
</script>
</body>
</html>
[HTML5] Canvas绘制简单形状的更多相关文章
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- [HTML5] Canvas绘制简单图片
获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象的onload方法,调用context对象的drawImage()方法,参数:Image对象,x坐标, ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
随机推荐
- Json/XML序列化和反序列化
1.json序列化和反序列化 序列化是将对象状态转换为可保持或传输的格式的过程; 反序列化,它将流转换为对象; 1)Json.Net 推荐使用Json.Net类库,需要引入的命名空间; 序列化:Jso ...
- ORM到底是什么有何优缺点
转载地址:http://www.cnblogs.com/wgbs25673578/p/5140482.html ORM的概念, ORM到底是什么 一.ORM简介 对象关系映射(Obje ...
- Dockerfile指令详解下
VOLUME 定义匿名卷 VOLUME指令的格式为: VOLUME [,...] VOLUME 之前我们说过,容器运行时应该尽量保持容器存储层不发生写操作,对于数据库类需要保存动态数据的应用,其数据库 ...
- 记录Kali Linux 安装输入法过程
1.首先设置源,打开终端输入. eafpad /etc/apt/sources.list 清空Sources.list里的内容,设置一个阿里云的源就行了. deb http://mirrors.ali ...
- 在.net core Mvc中使用Options和IOptionsSnapshot
1.Startup.cs 下代码 using System; using System.Collections.Generic; using System.Linq; using System.Thr ...
- MYSQL NULL值特性
NULL是一种“没有类型”的值,通常表示“无值”,“未知值”,“缺失值”,“超界”,“不在其中”等,我们在日常运用中很容易和NULL字符串混淆,这里大致整理了下NULL值的一些特性,以便能够正确使用N ...
- （原创）定时线程池中scheduleWithFixedDelay和scheduleAtFixedRate的区别
scheduleAtFixedRate 没有什么歧义,很容易理解,就是每隔多少时间,固定执行任务. scheduleWithFixedDelay 比较容易有歧义 貌似也是推迟一段时间执行任务,但Ora ...
- 【OpenCV3】cvRound()、cvFloor()、cvCeil()函数详解
函数cvRound().cvFloor().cvCeil()都是按照一种舍入方式将浮点型数据转换为整型数据. cvRound():返回跟参数最接近的整数值,即四舍五入: cvFloor() :返回不 ...
- 使用SharedPreference保存用户数据的步骤
1. 声明 SharedPreferences sp; 2. 初始化 sp = this.getSharedPreferences("文件名", 0);//0代表的是私有 3. 获 ...
- Android_问卷调查
这个是一个简单的问卷调查,对于我这样的初学者可能会绞尽脑汁想尽办法,去实现一个看起来特别简单的功能,我这个是用Intent传参的办法,来实现将前边的调查来进行统计,并记录,之后将这些信息显示到最后一个 ...