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 ...
随机推荐
- 定时任务 Linux cron job 初步使用
查看定时任务的命令为:crontab -l 编辑定时任务的命令为:crontab -e (编辑后立即生效 若注释可在行首加# 同vi) 定时任务说明 每一行为一 ...
- 微信内置浏览器和小程序的 User Agent 区别及判断方法
通过UA来判断不同的设备或者浏览器是开发者最常用的方式方法,而对于微信开发和小程序也是同样的一个情况,我们可以通过微信内置浏览器 User Agent 信息来判断其具体类型或者设备. 所以子凡就通过徒 ...
- Mybatis单个参数的if判断(针对异常:There is no getter for property..)------mybatis的内置对象
这里有一个删除方法: int deleteByPrimaryKey(Integer id); 然后对应的sql的xml如下: <delete id="deleteByPrimaryKe ...
- Struts2学习(2)
1.结果嗯配置 (1)全局结果页面 (2)局部结果页面 (3)result标签type属性 2.在action获取表单提交数据 (1)使用ActionContext类获取 (2)使用ServletAc ...
- Windows10安装Linux子系统
在win10上面可以直接在powershell里面安装Linux,具体步骤如下: 首先我们要打开Windows功能 在这里把勾打上 然后打开设置>>更新和安全>>针对开发人员, ...
- npm全局安装
时间长了,很多东西都忘了. 全局安装以后,在你自己的电脑任何位置都可以使用的包.直接用命令使用的: 比如:supervisor mok 还有cnpm,express之类的.gulp之类的. 剩下的我们 ...
- java: 观察者模式:Observable被观察者,Observer观察者
java: 观察者模式:Observable被观察者,Observer观察者 以房子价格为例,卖房者为被观察者: import java.util.Observable; //被观察者子类化 publ ...
- UML类图(一)-------概述+结构
类图用于描述系统中所包含的类以及它们之间的相互关系,帮助人们简化对系统的理解,它是系统分析和设计阶段的重要产物,也是系统编码和测试的重要模型依据. 1. 类 类(Class)封 ...
- DataTable:数据库到程序的桥梁
DataTable:是一个临时保存数据的网格虚拟表(表示内存中数据的一个表.).DataTable是ADO dot net 库中的核心对象,它无须代码就可以简单的绑定数据库,它具有微软风格的用户界面. ...
- linux内核图形配置疑难解决
配置linux内核是遇到的问题:(1)问题一make gconfig * * Unable to find the GTK+ installation. Please make sure that * ...