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

一波HTML5 Canvas基础绘图实例代码集合HTML5 canvas基本绘图之图形组合HTML5 canvas基本绘图之绘制阴影效果HTML5 canvas基本绘图之文字渲染HTML5 canvas基本绘图之绘制曲线HTML5 canvas基本绘图之图形变换HTML5 canvas基本绘图之填充样式实现HTML5 canvas基本绘图之绘制线条HTML5 canvas基本绘图之绘制五角星HTML5 canvas基本绘图之绘制矩形HTML5 canvas基本绘图之绘制线段

2023-10-14 451人已围观

简介 这篇文章主要介绍了一波HTML5 Canvas基础绘图实例代码集合,包括圆形矩形圆角等基本图形的绘制,需要的朋友可以参考下

基本绘制

XML/HTML Code复制内容到剪贴板
  1. var canvas = document.getElementById('canvas');   
  2. if (canvas.getContext) {   
  3.     var context = canvas.getContext('2d');   
  4.     // 线宽   
  5.     context.lineWidth = 4;   
  6.     // 画笔颜色   
  7.     context.strokeStyle = 'red';   
  8.     // 填充色   
  9.     context.fillStyle = "red";   
  10.     // 线帽类型   
  11.     context.lineCap = 'butt'; // round, square   
  12.     // 开始路径   
  13.     context.beginPath();   
  14.     // 起点   
  15.     context.moveTo(10,10);   
  16.     // 终点   
  17.     context.lineTo(150,50);   
  18.     // 绘制   
  19.     context.stroke();   
  20. ｝  

    
矩形

XML/HTML Code复制内容到剪贴板
  1. var canvas = document.getElementById('canvas');   
  2. if (canvas.getContext) {   
  3.     context.beginPath();   
  4.     context.strokeRect(10,10,70,40);   
  5.     // 矩形的另一种方式   
  6.     context.rect(10,10.70,40);   
  7.     context.stroke();   
  8.         
  9.     // 实心矩形   
  10.     context.beginPath();   
  11.     context.fillRect(10,10,70,40);   
  12.     // 另一种方式实心矩形   
  13.     context.beginPath();   
  14.     context.rect(10,10,70,40);   
  15.     context.fill();   
  16. ｝  

     
 圆形

XML/HTML Code复制内容到剪贴板
  1. var canvas = document.getElementById('canvas');   
  2. if (canvas.getContext) {   
  3.     context.beginPath();   
  4.     // 圆中心坐标x, 圆中心坐标Y, 圆弧半径， 起始角度，终止角度，是否逆时针   
  5.     // 第4个参数和第五个参数是要传入的弧度，如果画30角度，需要将其转化为弧度 30 * Math.PI / 180   
  6.     context.arc(100,100,70,0,130 * Math.PI / 180, true);   
  7.     context.stroke();   
  8.     context.fill();   
  9. ｝  

    
圆角

XML/HTML Code复制内容到剪贴板
  1. var canvas = document.getElementById('canvas');   
  2. if (canvas.getContext) {   
  3.     context.beginPath();   
  4.     context.moveTo(20,20);   
  5.     context.lineTo(70,20);   
  6.        // 为一条路径画弧度p1.x p1.y p2.x, p2.y 弧半径，    
  7.     context.arcTo(120,30,120,70, 50);   
  8.     context.lineTo(120,120);   
  9.     context.stroke();   
  10.         
  11.     // 擦除canvas 画板   
  12.     context.beginPath();   
  13.     context.fillRect(10,10,200,100);   
  14.         
  15.     // 擦除区域   
  16.     context.clearRect(30,30,50,50);   
  17. ｝  

二次贝塞尔曲线

XML/HTML Code复制内容到剪贴板
  1. var canvas = document.getElementById('canvas');   
  2. if (canvas.getContext) {   
  3.       context.beginPath();   
  4.       context.moveTo(100,100);   
  5.       context.quadraticCurveTo(20,50,200,20);   
  6.       context.stroke();   
  7. ｝  

    
三次贝塞尔曲线

XML/HTML Code复制内容到剪贴板
  1. var canvas = document.getElementById('canvas');   
  2. if (canvas.getContext) {   
  3.      context.moveTo(68,130);   
  4.      var cX1 = 20;   
  5.      var cY1 = 10;   
  6.      var cX2 = 268;   
  7.      var cY2 = 10;   提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：很酷的HTML5电子书翻页动画特效css transform 翻页动画记录的实现HTML5 3D书本翻页动画的实现示例使用纯CSS实现书籍3D翻页效果的示例一个不错的html 打印代码支持翻页css实现点击滚动翻页的效果(无js)css3实现书本翻页效果的示例代码

    下一篇：HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例详解如何用HTML5 Canvas API控制图片的缩放变换通过Canvas及File API缩放并上传图片完整示例Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 （附转换公

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网