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. javaMail发送邮件实例

    背景:最近项目里有个实时发送邮件的功能,今天闲下来整理 一下,记录下来方便以后直接使用. 代码: package com.dzf.utils; import java.io.File; import ...

  2. Java properties配置文件工具类

    /* * Copyright (c) 2017. Panteng.Co.Ltd All rights reserved */ import org.apache.log4j.Logger; impor ...

  3. Codeforces Round #373 (Div. 2) A , B , C

    A. Vitya in the Countryside time limit per test 1 second memory limit per test 256 megabytes input s ...

  4. Python中的exec、eval的区别

    通过exec可以执行动态Python代码,类似Javascript的eval功能: 而Python中的eval函数可以计算Python表达式,并返回结果: (exec不返回结果,print(eval( ...

  5. JavaScriptSerializer 日期处理 JSON.Net

    [WebMethod(Description = "取得所有人员 自带json")] [SoapHeader("key")] [ScriptMethod(Res ...

  6. MRC与ARC混合编程的编译器标记

    如果是MRC项目创建ARC源文件,给这个源文件加上 -fobjc-arc 的编译器标记, 如果是ARC项目创建MRC源文件,给这个源文件加上 -fno-objc-arc 的编译器标记. 步骤: 1. ...

  7. 二维码的扫描和生成--第三方开源--ZXing

    ZXing的二维码功能的提取lib下载地址:https://github.com/xuyisheng/ZXingLib 1.扫描二维码: 我们扫描就是要用到这个CaptureActivity类,直接把 ...

  8. 第二次ScrumMeeting

    每个人的工作(有Issue的内容和链接):昨天已完成的工作,今天计划完成的工作:工作中遇到的困难. 团队成员 昨日完成任务 明日要完成的任务 易子沐 前端框架学习 issue16 搭建主页框架 iss ...

  9. Git学习--创建版本库

    什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都可以追踪历史,或 ...

  10. 201621123014《Java程序设计》第十四周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 答 ...