canvas 绘制矩形和圆形
canvas绘制有两神方法:
1)、填充(fill)
填充是将图形内部填满.
2)、绘制边框 (stroke)
绘制边框是不把图形内部填满，只是绘制图形的外框.
当我们在绘制图形的时候，首先要设定好绘制的样式，然后我们就可以调用有关的方法进行绘制
fillStyle属性
填充的样式，在这个属性里面设置填入的填充颜色值
strokeStyle属性
图形边框的样式，在这个属性里面设置填入边框的填充颜色
绘制矩形案例：
在body的属性里面，使用onload="draw('canvas' )“语句，调用脚本文件中的draw函数进行图形绘画
画布的创建方法：指定 id ， width（画布宽度）， height（画布高度）
创建一个画布，长度为600，高度为400
<body onload="draw('canvas')">
<canvas id="canvas" width="600" height="400"></canvas>
</body>
引入一个名为canvas的is脚本，js脚本的语言编码是utf-8
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象
context.fillStyle = "green"; // 设置或返回用于填充绘画的颜色、渐变或模式
context.strokeStyle = "#fff"; //图形边框的填充颜色
context.lineWidth = 5; //用宽度为 5 像素的线条来绘制矩形：
context.fillRect(0,0,400,300); // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形
context.strokeRect(50,50,180,120); //绘制矩形（无填充）
context.strokeRect(110,110,180,120);
}
使用filiRect方法和strokeRect方法来填充矩形和绘制矩形的边框
context. fillRect (x,y,width,height)
context.strokeRect (x,y,width,height)
这两种方法的参数都是一样的，x是指拒形的起点横坐标，y是指拒形的纵坐标.坐标的原点是canvas画布的最左上角，
width是指拒形的长度，height是指矩形的高度.
绘制圆形案例：
创建圆形路径时，需要使用图形上下文对像的arc方法。
context.arc (x,y,radius,starAngle,endAngle,anticlockwise)
x是绘制圆形的起点横坐标，y是绘创圆形起点的纵坐标，radius是图形的半径，
starAngle是开始的角度，endAngle是结束的角度·
anticlockwise是否按顺时针方向绘制
绘制半径与圆弧时指定参数为开始弧度与结束弧度，也可以把角度换成弧度
var radius = degrees *Math.Pl/180
这个里面的Math.Pl表示的角度是180度，Math.Pl*2的角度是360度.
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "#f1f2f3";
context.fillRect(0,0,400,400);
for(var i=0;i<10;i++){
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.fillStyle = "rgba(255,0,0,0.25)";
context.fill();
}
}
保存文件
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "green";
context.fillRect(0,0,400,300);
window.location = canvas.toDataURL('image/png');
}
canvas 绘制矩形和圆形的更多相关文章
- h5学习-canvas绘制矩形、圆形、文字、动画
绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果
绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...
- html5 canvas绘制矩形和圆形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- canvas绘制矩形
canvas绘制矩形 方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...
- canvas 绘制 矩形 圆形
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <tit ...
- canvas 绘制矩形
XXX(x,y,width,height) x矩形左上角x坐标 y矩形左上角y坐标 ...
- vue下canvas绘制矩形
起因:根据项目需求本人写了一个绘制矩形的组件.功能:在图片中绘制矩形,根据图片大小进行自适应展示,获取图片矩形坐标.思路:首先定义一个固定大小的DIV,DIV标签中有监测鼠标变化的四个事件moused ...
- canvas绘制线和矩形
###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...
随机推荐
- 反人类的MyEclipse之-eclipse设置花括号换行显示
http://www.cnblogs.com/zhwl/archive/2012/12/17/2821806.html 习惯了C的代码风格,用Eclipse的风格,实在是看得卵子痛.尤其是大括号放在最 ...
- [SQL]SQL语言入门级教材_跟我学SQL（六）
跟我学SQL:(一)数据查询 且不说你是否正在从事编程方面的工作或者不打算学习SQL,可事实上几乎每一位开发者最终都会遭遇它.你多半还用不着负责创建和维持某个,但你怎么着也该知道以下的一些有关的SQL ...
- Bmob—移动后端云服务平台
对于个人或者小团队来说,开发一个有网络功能的游戏是一件不容易的事情,必须掌握一门诸如Java/.net/php这类的服务器开发语言. Bmob云服务方便了开发者.Bmob可以给应用软件快速添加一个安全 ...
- eclipse高效快捷键
代码快速对齐:Ctrl+shift+f 添加注释,取消注释:Ctrl+shift+/ Ctrl+shift+\ Ctrl+/ Alt+Shift+R:一秒钟重命名 Ctrl+D:一秒钟删除行 ...
- php mysql_affected_rows获取sql执行影响的行数
php mysql_affected_rows函数用于获取执行某一SQL语句(如INSERT,UPDATE 或 DELETE )所影响的行数,本文章向大家介绍php mysql_affected_ro ...
- java的String类(一)
final类,无子类. 类内定义了char数组value[],私有,不可修改. String的长度,length(). 判空,isEmpty(). 索引index处的字符,charAt(index). ...
- MFC获取文本框字符串
//方法1:使用用GetDlgItem,得到控件对像, 再GetWindowText //GetDlgItem(IDC_EDIT1)->GetWindowText() //方法2:控件与对应类关 ...
- Perlin Noise 及其应用
Perlin Noise 可以用来表现自然界中无法用简单形状来表达的物体的形态,比如火焰.烟雾.表面纹路等.要生成 Perlin Noise 可以使用工具离线生成,也可以使用代码运行时生成.最简单常用 ...
- 小巧的http live streaming m3u8播放器
转载请注明: TheViper http://www.cnblogs.com/TheViper 原来发表过一篇分段播放的flash播放器.这个播放器其实就没有神马原理,就是把一个视频分成好几个视频, ...
- 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序的处理方式
今天客户向我反映一个问题,当他们在用我们的系统导出excel表格时,报错:未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序 经过找资料终于得到解决方法,记录一下. 在对应 ...