[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 ...
随机推荐
- 浅谈.NET,C#三层架构（自己总结）
三层架构 常见架构: 三层(经典) MVC MVVM MVP 开发中常见的23种设计模式: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种: ...
- Python对excel表格的操作.
参考博客: https://blog.csdn.net/lmj19851117/article/details/78814721 ####一.excel的读取操作xlrd#### import xlr ...
- android界面
自定义控件EditText 在src中的drawable新建myeditext.xml文件<?xml version="1.0" encoding="utf-8&q ...
- C++的访问关系
1.C++的访问关系
- Mac OS 10.12 - 如何能够像在Windows一样切换中英文输入法和大小写键？
最开始,我切换中英文输入法和大小写键是按照下面博客做到的: http://www.cnblogs.com/sunylat/p/6415563.html 但是当我安装完毕搜狗输入法后,切换中英文输入法和 ...
- node.js async 几个函数
async.waterfallasync.seriesasync.parallelasync.auto http://my.oschina.net/huangsz/blog/176203http:// ...
- SQL一些问题
什么是索引: 一般说法:索引是与表关联的磁盘上结构,可以加快从表中检索行的速度.索引包含由表中的一列或多列生成的键.这些键存储在一个结构中,使 SQL Server 可以快速有效地查找与键值关联的行. ...
- nacicat premium 快捷键
1.ctrl+q 打开查询窗口 2.ctrl+/ 注释sql语句 3.ctrl+shift +/ 解除注释 4.ctrl+r 运行查询窗口的s ...
- Java并发编程实践读书笔记（3）任务执行
类似于Web服务器这种多任务情况时,不可能只用一个线程来对外提供服务.这样效率和吞吐量都太低. 但是也不能来一个请求就创建一个线程,因为创建线程的成本很高,系统能创建的线程数量是有限的. 于是Exec ...
- Oracle sys或者system的默认密码
Oracle的sys和system默认密码 system默认:manager sys默认:change_on_install 使用SQL Plus登录数据库时,system使用密码manager可 ...