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绘制简单图形的更多相关文章

  1. 学习笔记:HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  2. Canvas学习:封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  3. JavaScript动画基础:canvas绘制简单动画

    动画是将静止的画面变为动态的艺术.实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...

  4. Java入门:绘制简单图形

    在上一节,我们学习了如何使用swing和awt工具创建一个空的窗口,本节学习如何绘制简单图形. 基本绘图介绍 Java中绘制基本图形,可以使用Java类库中的Graphics类,此类位于java.aw ...

  5. 在高德地图上用svg.js绘制简单图形

    这段时间做的一个项目,需要在地图上绘制简单的图形.在学习高德地图JS API的过程中,发现高德地图提供的点.线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层 ...

  6. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  7. CSS绘制简单图形

    究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...

  8. Windows控制台下绘制简单图形

    最近接触到一个很有意思的问题,如何在Windows控制台下画图,翻遍了C的头文件也没找到画图的函数,好吧,那就用Windows提供的API函数吧,看来想移植是没戏了.先画一个简单的图,类似心电图那种吧 ...

  9. shape-自绘制简单图形

    shape 可以绘制简单的图形,颜色等.它主要就是应用于selector 的一些状态. 本文内容参考自http://www.cnblogs.com/cyanfei/archive/2012/07/27 ...

随机推荐

  1. 定时任务 Linux cron job 初步使用

     查看定时任务的命令为:crontab -l   编辑定时任务的命令为:crontab -e   (编辑后立即生效 若注释可在行首加#  同vi)         定时任务说明       每一行为一 ...

  2. 微信内置浏览器和小程序的 User Agent 区别及判断方法

    通过UA来判断不同的设备或者浏览器是开发者最常用的方式方法,而对于微信开发和小程序也是同样的一个情况,我们可以通过微信内置浏览器 User Agent 信息来判断其具体类型或者设备. 所以子凡就通过徒 ...

  3. Mybatis单个参数的if判断(针对异常:There is no getter for property..)------mybatis的内置对象

    这里有一个删除方法: int deleteByPrimaryKey(Integer id); 然后对应的sql的xml如下: <delete id="deleteByPrimaryKe ...

  4. Struts2学习(2)

    1.结果嗯配置 (1)全局结果页面 (2)局部结果页面 (3)result标签type属性 2.在action获取表单提交数据 (1)使用ActionContext类获取 (2)使用ServletAc ...

  5. Windows10安装Linux子系统

    在win10上面可以直接在powershell里面安装Linux,具体步骤如下: 首先我们要打开Windows功能 在这里把勾打上 然后打开设置>>更新和安全>>针对开发人员, ...

  6. npm全局安装

    时间长了,很多东西都忘了. 全局安装以后,在你自己的电脑任何位置都可以使用的包.直接用命令使用的: 比如:supervisor mok 还有cnpm,express之类的.gulp之类的. 剩下的我们 ...

  7. java: 观察者模式:Observable被观察者,Observer观察者

    java: 观察者模式:Observable被观察者,Observer观察者 以房子价格为例,卖房者为被观察者: import java.util.Observable; //被观察者子类化 publ ...

  8. UML类图(一)-------概述+结构

    类图用于描述系统中所包含的类以及它们之间的相互关系,帮助人们简化对系统的理解,它是系统分析和设计阶段的重要产物,也是系统编码和测试的重要模型依据.       1. 类       类(Class)封 ...

  9. DataTable:数据库到程序的桥梁

    DataTable:是一个临时保存数据的网格虚拟表(表示内存中数据的一个表.).DataTable是ADO dot net 库中的核心对象,它无须代码就可以简单的绑定数据库,它具有微软风格的用户界面. ...

  10. linux内核图形配置疑难解决

    配置linux内核是遇到的问题:(1)问题一make gconfig * * Unable to find the GTK+ installation. Please make sure that * ...