您现在的位置是：网站首页> 编程资料编程资料

HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图调用HTML5的Canvas API绘制图形的快速入门指南深入解析HTML5 Canvas控制图形矩阵变换的方法实例讲解利用HTML5 Canvas API操作图形旋转的方法html5的画布canvas——画出弧线、旋转的图形实例代码+效果图html5-Canvas可以在web中绘制各种图形H5最强接口之canvas实现动态图形功能

2023-10-14 493人已围观

简介 本文通过八种示例给大家分享了html5 canvas绘图，需要的朋友一起来学习吧

HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。

好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。

1、使用Canvas绘制直线：


 

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.     head>  
  6.     <style type="text/css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     style>  
  9.     <script type="text/javascript">  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.moveTo(20,30);//第一个起点   
  17.             cans.lineTo(120,90);//第二个点   
  18.             cans.lineTo(220,60);//第三个点（以第二个点为起点）   
  19.             cans.lineWidth=3;   
  20.             cans.strokeStyle = 'red';   
  21.             cans.stroke();   
  22.         }   
  23.     script>  
  24.     <body onload="pageLoad();">  
  25.         <canvas id="can" width="400px" height="300px">4canvas>  
  26.     body>  
  27. html>  

这里用到的两个API方法，moveTo和lineTo分别是线段的起点和终点坐标，变量为（X坐标,Y坐标）,strokeStyle、stroke分别路径绘制样式和绘制路径。

2、绘制渐变线条

渐变线条就是颜色有渐变的效果，当然渐变的样式可以遵循路径的方向也可以不遵循路径的方向：

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.     head>  
  6.     <style type="text/css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     style>  
  9.     <script type="text/javascript">  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.moveTo(0,0);   
  17.             cans.lineTo(400,300);   
  18.             var gnt1 = cans.createLinearGradient(0,0,400,300);//线性渐变的起止坐标   
  19.             gnt1.addColorStop(0,'red');//创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置，最大为1，一个渐变中可以写任意个渐变颜色   
  20.             gnt1.addColorStop(1,'yellow');   
  21.             cans.lineWidth=3;   
  22.          

    上一篇：详解HTML5中的<aside>元素与<article>元素详解HTML5中div和section以及article的区别HTML5中div、article、section的区别及使用介绍HTML5中的Article和Section元素认识及使用

    下一篇：深入解析HTML5使用SVG图像时的viewBox属性用法基于html5实现的svg图标手机菜单动态特效源码html5基于svg实现圆形进度统计动画特效源码基于HTML5 SVG制作汉堡包菜单按钮分段动画效果html5+svg学习指南之SVG基础知识HTML5+SVG实现的线性图表特效源码 可绘制图表区域颜色HTML5 SVG实现的Loading动画加载特效源码深入浅析HTML5中的SVG

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网