Chinaunix首页 | 论坛 | 博客

纸上得来终觉浅

首页　| 　博文目录　| 　关于我

水中残月

  • 博客访问： 157415
  • 博文数量： 42
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 399
  • 用 户 组： 普通用户
  • 注册时间： 2015-09-23 11:47
个人简介

程序猿啊程序猿

文章分类

全部博文（42）

文章存档

2016年（28）

2015年（14）

我的朋友
最近访客
推荐博文
HTML5 基础Canvas操作

分类： JavaScript

2016-01-13 18:30:06


点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html lang="zh-ch">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5--Canvas画图(javascript)</title>
  6.     <style>
  7. canvas{
  8.     margin: 0 10px;
  9. }
  10.     </style>
  11. </head>
  12. <body>
  13.     <h1 style="text-align:center">HTML5--Canvas画图(javascript)</h1>
  14.     <canvas id="mycanvas" width="200" height="100" style="border:1px solid #bbb"></canvas>
  15.     <canvas id="grd" width="200" height="100" style="border:1px solid #bbb" ></canvas>
  16.     <canvas id="circle" width="200" height="200" ></canvas>
  17.     <canvas id="ease" ></canvas>
  18.     <script type="text/javascript">

  20. /*Canvas 画直线，填充区域*/
  21.     var c=document.getElementById('mycanvas');//DOM取得节点
  22.     var cxt=c.getContext("2d");
  23.     /*getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法*/
  24.     cxt.fillStyle="#eee"; //选择画笔颜色，默认是黑色
  25.     cxt.fillRect(0,0,200,100);//用红色画笔填充一个左上角坐标为（0,0）开始长200，宽100的矩形
  26.     cxt.beginPath();//开始一条路径或者重置当前路径
  27.     cxt.lineWidth="5";//线条宽度为5px;
  28.     cxt.moveTo(20,20);//canvas画笔移动到坐标为（20,20）位置处
  29.     cxt.lineTo(150,50);//由（20,20）向（150,50）处画直线
  30.     cxt.lineTo(150,70);//由（150,50)处向(150,70)处画直线
  31.     cxt.lineTo(20,70);//由(150,70)处向(20,70)处画直线
  32.     cxt.strokeStyle="green";//路径颜色为绿色
  33.     cxt.stroke();//绘制出由lineTo()和moveTo()方法定义的路径，默认为黑色(勾勒出边框)
  34.  
  35. /*Canvas 渐变*/
  36.     var c=document.getElementById('grd');
  37.     var cxt=c.getContext("2d");
  38.     var grd=cxt.createLinearGradient(0,0,0,100);//创建固定大小的渐变区域
  39.     grd.addColorStop(0,"#800");
  40.     grd.addColorStop(0.5,"#080");
  41.     grd.addColorStop(1,"#008");//设置渐变区域的颜色
  42.     cxt.fillStyle=grd;//画笔取得渐变颜色
  43.     cxt.fillRect(0,0,200,100);//填充矩形


  46.  /* Canvas 画圆*/
  47.     var c=document.getElementById('circle');
  48.     var cxt=c.getContext("2d");
  49.     cxt.beginPath();
  50.     cxt.arc(100,100,50,0,Math.PI,true);//逆时针画一个半径为100的半圆，圆心坐标为(100,100);
  51.     cxt.closePath();
  52.     cxt.fillStyle="rgba(255,0,0,0.3)";
  53.     cxt.fill();
  54.     cxt.strokeStyle="blue";//边框色为蓝色
  55.     cxt.stroke();//勾勒边框
  57. </body>
  58. </html>

阅读(848) | 评论(0) | 转发(0) |
0

上一篇：PHP日期和JS日期那些事

下一篇：JS实现页面显示倒计时跳转

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6