canvas绘制简单图形
canvas绘图篇：
canvas绘制矩形：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘图</title>
<script type="text/javascript" src="Rec.js"></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="draw('canvas');">
<canvas id="canvas" width="500" height="430"></canvas>
</body>
</html>
html Code
/**
* Created by Administrator on 2016/1/24.
*/
function draw(id){
var canvas = document.getElementById(id);//获取canvas元素
var contest = canvas.getContext('2d'); //获取上下文 contest.fillStyle = "block"; //设置画布的填充样式
contest.strokeStyle="white"; //设置绘制对象的边框颜色 contest.lineWidth =5;//设置画笔宽度 contest.fillRect(0,0,450,300); //fill填充
contest.strokeRect(20,20,150,200); //stroke描边 }
JS Code
<style type="text/css">
body{
margin:;
padding:;
}
</style>
这段代码保证了画布与浏览器之间无缝契合。
canvas绘制圆形：
html代码不再赘述。
/**
* Created by Administrator on 2016/1/24.
*/
function draw(id){
var canvas = document.getElementById(id);
var contest = canvas.getContext('2d');
contest.fillStyle = "#f1f2f3";
contest.fillRect(0,0,400,400);
for(var i=1;i<=10;i++) {
contest.beginPath();
contest.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
contest.closePath();
contest.fillStyle = "rgba(255,0,0,0.25)";
contest.fill();
if(i%2==0){
contest.strokeStyle = "#FF3300";
contest.stroke();
}
}
}
canvas绘制文字：
html代码不再赘述。
/**
* Created by Administrator on 2016/1/26.
*/
function draw(id){
var canvas = document.getElementById(id);
var contest = canvas.getContext('2d');
contest.fillStyle = "green";
contest.fillRect(0,0,800,300);
contest.fillStyle = "red";
contest.strokeStyle = "block";
contest.font = "bold 40px '汉仪嘟嘟体简','汉仪雪峰体简','华康宝风体繁','微软雅黑'";
contest.textBaseline = "top";
contest.textAlign = "center";
contest.fillText('晨落梦公子',0,0);
contest.strokeText('晨落梦公子',0,40);
}
JS绘图说明：
1、先建立函数，函数为 id。格式：function draw (id) {}
2、定义canvas变量，并获取。格式：var canvas = document.getElementById(id);这里无引号
3、定义canvas变量，并获取。格式：var contest = canvas.getContest('2d');注意这里的单引号
4、绘制图形。无外乎两种:fill（填充）和stroke（描边）。另外有画笔设置。
另外解释相关函数：
绘制矩形时有：
fillStyle = "颜色值" 颜色值可以是16位进制、RGB(A)或英语；
同理有strokeStyle = "颜色值"；
fillRect(x,y,width,height) x:横坐标 y:纵坐标（坐标相对于浏览器的左上角） width:图形宽度 height:图形高度；
同理有strokRect(x,y,width,heigth)；
另外有画笔宽度设置：linewidth = 数值。
绘制圆形时有：
设置开始路径，绘图，设置结束路径。
这里解释 contest.arc(x, y, ridus,sAngle,eAngle,counterclockwise)
x:圆心的横坐标 y:圆心的纵坐标 ridus:圆的半径
sAngle:开始角度 eAngle:结束角度
counterclockwise:true:顺时针绘图；false：逆时针绘图。
小知识点，颜色值设定时可设置为RGB(A)。格式：fillStyle = "rgba(255,255,255,0.25)"
依次为红绿蓝，a指的是alpha(透明度) ，数值范围是0~1。
fill():填充路径。
绘制文字时有：
字体设置格式：font = "font-weight font-size font-family"（注意中间用空格隔开）
font-weight可选样式有：normal（正常）,bold（粗体）,bolder（更粗）,lighter（更细）,数值100~900（默认是400）。
font-size可选样式有：数值px。
font-family可选样式有：本地的字体库。如果写多个格式：'字体1','字体2','字体3'，程序执行时会从左到右依次寻找，找到则停止，并用找到作为当前字体。
另外有：1）contest.textBaseline = "top";：设置文字相对于横坐标轴的位置。
2）contest.textAlign = "center";设置文字相对于纵坐标的位置。
canvas绘制简单图形的更多相关文章
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- JavaScript动画基础：canvas绘制简单动画
动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...
- Java入门：绘制简单图形
在上一节,我们学习了如何使用swing和awt工具创建一个空的窗口,本节学习如何绘制简单图形. 基本绘图介绍 Java中绘制基本图形,可以使用Java类库中的Graphics类,此类位于java.aw ...
- 在高德地图上用svg.js绘制简单图形
这段时间做的一个项目,需要在地图上绘制简单的图形.在学习高德地图JS API的过程中,发现高德地图提供的点.线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层 ...
- [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形
在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...
- CSS绘制简单图形
究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...
- Windows控制台下绘制简单图形
最近接触到一个很有意思的问题,如何在Windows控制台下画图,翻遍了C的头文件也没找到画图的函数,好吧,那就用Windows提供的API函数吧,看来想移植是没戏了.先画一个简单的图,类似心电图那种吧 ...
- shape-自绘制简单图形
shape 可以绘制简单的图形,颜色等.它主要就是应用于selector 的一些状态. 本文内容参考自http://www.cnblogs.com/cyanfei/archive/2012/07/27 ...
随机推荐
- MongoDB快速入门（六）- 更新文档
更新文档 MongoDB的update()和save()方法用于更新文档到一个集合. update()方法将现有的文档中的值更新,而save()方法使用传递到save()方法的文档替换现有的文档. M ...
- Struts2获取参数的几种方式
Struts2由于是一个贴心的框架,所以获取参数这种体力活,就无需再通过原生的request来getParameter了,有如下几种方式进行获取 1.Action中属性驱动,必须提供与form表单na ...
- Qt qobject_cast用法 向下转型
函数原型: T qobject_cast ( QObject * object ) 本方法返回object向下的转型T,如果转型不成功则返回0,如果传入的object本身就是0则返回0. 在使用时有两 ...
- Python之面向对象总结
一.面向对象 1.面向过程 a.优点:极大的降低了写程序的复杂度,只需要顺着执行的步骤,堆叠代码即可 b.缺点:一套流水线或者流程就是来解决一个问题,代码就是牵一发而东莞全身 2.面向对象 a.优点: ...
- Spring Boot入门——thymeleaf模板使用
使用步骤 1.在pom.xml中引入thymeleaf <!-- thymeleaf插件 --> <dependency> <groupId>org.springf ...
- JavaScript 全部介绍
1.new 表达式 new之后写函数名的话,就会把该函数作为构造函数来进行调用. 2.字符串型的运算 由于JavaScript的字符串型是不可变类型,所以字符串值本质上是不能改变的.这个答案 ...
- .net core web发布到CentOS汇总
直到今天我的博客终于可以见世人了,中间懒了很长一段时间,什么也没干,也没怎么学习,前段时间也是各种折腾,无心学习.本篇主要汇总下从一开始到现在遇到的问题汇总,作为学习笔记.我的博客就是我的学习笔记,因 ...
- 深度学习—BN的理解（一）
0.问题 机器学习领域有个很重要的假设:IID独立同分布假设,就是假设训练数据和测试数据是满足相同分布的,这是通过训练数据获得的模型能够在测试集获得好的效果的一个基本保障.那BatchNorm的作用是 ...
- APP测试的那些坑
在记录app测试走过的那些坑之前,先总结下app测试的工作主要有哪些: 1.功能测试,无论是什么软件产品,必不可少的就是功能测试.我们需要测试这款app产品的功能是否完善,是否符合客户需求,是否符 ...
- 关于JAVA一些知识的了解
一.枚举类型 示例代码: public class EnumTest { public static void main(String[] args){ Size s=Size.SMALL; ...