• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > html5 canvas 详细使用教程

html5 canvas 详细使用教程

作者:59580 字体:[增加 减小] 来源:互联网 时间:2017-05-11

59580通过本文主要向大家介绍了html5 canvas教程,html5 canvas基础教程,html5 canvas视频教程,html5 canvas动画教程,html5 canvas标签等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

话不多说,请看代码

<!DOCTYPE html ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">
    function draw21(id) {
      var canvas = document.getElementById(id)
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      //实践表明在不设施fillStyle下的默认fillStyle=black
      context.fillRect(0, 0, 100, 100);
      //实践表明在不设施strokeStyle下的默认strokeStyle=black
      context.strokeRect(120, 0, 100, 100);
      //设置纯色
      context.fillStyle = "red";
      context.strokeStyle = "blue";
      context.fillRect(0, 120, 100, 100);
      context.strokeRect(120, 120, 100, 100);
      //设置透明度实践证明透明度值>0,<1值越低,越透明,值>=1时为纯色,值<=0时为完全透明
      context.fillStyle = "rgba(255,0,0,0.2)";
      context.strokeStyle = "rgba(255,0,0,0.2)";
      context.fillRect(240,0 , 100, 100);
      context.strokeRect(240, 120, 100, 100);
    }
    function draw22(id) {
      var canvas = document.getElementById(id)
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      //实践表明在不设施fillStyle下的默认fillStyle=black
      context.fillRect(0, 0, 100, 100);
      //实践表明在不设施strokeStyle下的默认strokeStyle=black
      context.strokeRect(120, 0, 100, 100);
      //设置纯色
      context.fillStyle = "red";
      context.strokeStyle = "blue";
      context.fillRect(0, 120, 100, 100);
      context.strokeRect(120, 120, 100, 100);
      //设置透明度实践证明透明度值>0,<1值越低,越透明,值>=1时为纯色,值<=0时为完全透明
      context.fillStyle = "rgba(255,0,0,0.2)";
      context.strokeStyle = "rgba(255,0,0,0.2)";
      context.fillRect(240, 0, 100, 100);
      context.strokeRect(240, 120, 100, 100);
      context.clearRect(50, 50, 240, 120);
    }
    function draw23(id) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext('2d');
      var n = 0;
      //左侧1/4圆弧
      context.beginPath();
      context.arc(100, 150, 50, 0, Math.PI/2 , false);
      context.fillStyle = 'rgba(255,0,0,0.25)';
      context.fill();
      context.strokeStyle = 'rgba(255,0,0,0.25)'
      context.closePath();
      context.stroke();
      //右侧1/4圆弧
      context.beginPath();
      context.arc(300, 150, 50, 0, Math.PI/2 , false);
      context.fillStyle = 'rgba(255,0,0,0.25)';
      context.fill();
      context.strokeStyle = 'rgba(255,0,0,0.25)';
      context.closePath();
      context.stroke();
    }
    function draw0(id) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext('2d');
      context.beginPath();
      context.arc(200, 150, 100, 0, Math.PI * 2, true);
      //不关闭路径路径会一直保留下去,当然也可以利用这个特点做出意想不到的效果
      context.closePath();
      context.fillStyle = 'rgba(0,255,0,0.25)';
      context.fill();
    }
    function draw1(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      context.fillStyle = "#EEEEFF";
      context.fillRect(0, 0, 400, 300);
      var n = 0;
      var dx = 150;
      var dy = 150;
      var s = 100;
      context.beginPath();
      context.fillStyle = 'rgb(100,255,100)';
      context.strokeStyle = 'rgb(0,0,100)';
      var x = Math.sin(0);
      var y = Math.cos(0);
      var dig = Math.PI / 15 * 11;
      for (var i = 0; i < 30; i++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        context.lineTo(dx + x * s, dy + y * s);
      }
      context.closePath();
      context.fill();
      context.stroke();
    }
    function draw2(id) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext("2d");
      context.fillStyle = "#EEEFF";
      context.fillRect(0, 0, 400, 300);
      var n = 0;
      var dx = 150;
      var dy = 150;
      var s = 100;
      context.beginPath();
      context.globalCompositeOperation = 'and';
      context.fillStyle = 'rgb(100,255,100)';
      var x = Math.sin(0);
      var y = Math.cos(0);
      var dig = Math.PI / 15 * 11;
      context.moveTo(dx, dy);
      for (var i = 0; i < 30; i++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s);
      }
      context.closePath();
      context.fill();
      context.stroke();
    }
    function draw24(id) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext("2d");
      context.moveTo(50, 50);
      context.bezierCurveTo(50, 50,150, 50, 150, 150);
      context.stroke();
      context.quadraticCurveTo(150, 250, 250, 250);
      context.stroke();
    }
    function draw25(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext('2d');
      var g1 = context.createLinearGradient(0, 0, 0, 300);
      g1.addColorStop(0, 'rgb(255,0,0)'); //红 
      g1.addColorStop(0.5, 'rgb(0,255,0)');//绿
      g1.addColorStop(1, 'rgb(0,0,255)'); //蓝
      //可以把lg对象理解成GDI中线性brush
      context.fillStyle = g1;
      //再用这个brush来画正方形
      context.fillRect(0, 0, 400, 300); 
    }
    function draw3(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext('2d');
      var g1 = context.createLinearGradient(0, 0, 0, 300);  
      g1.addColorStop(0,'rgb(255,255,0)');//浅绿 
      g1.addColorStop(1,'rgb(0,255,255)');//浅蓝
      context.fillStyle = g1;
      context.fillRect(0, 0, 400, 300);
      var n = 0;
      var g2 = context.createLinearGradient(0, 0, 300, 0);
      g2.addColorStop(0, 'rgba(0,0,255,0.5)');//蓝色
      g2.addColorStop(1, 'rgba(255,0,0,0.5)');//红色
      for (var i = 0; i < 10; i++) {
        context.beginPath();
        context.fillStyle = g2;
        context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
        context.closePath();
        context.fill();
      }
    }
    function draw26(id) {
      //同一个圆心画球型
      /*var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext('2d');
      var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100);
      g1.addColorStop(0.1, 'rgb(255,0,0)'); 
      g1.addColorStop(1, 'rgb(50,0,0)');
      context.fillStyle = g1;
      context.beginPath();
      context.arc(200, 150, 100, 0, Math.PI * 2, true);
      context.closePath();
      context.fill();*/
      //不同圆心看径向渐变模型
      var canvas = document.getElementById(id);
      if (canvas == null)
      return false;
      var context = canvas.getContext('2d');
      var g1 = context.createRadialGradient(100, 150, 10, 300, 150, 50);
      g1.addColorStop(0.1, 'rgb(255,0,0)');
      g1.addColorStop(0.5, 'rgb(0,255,0)');
      g1.addColorStop(1, 'rgb(0,0,255)');
      context.fillStyle = g1;
      context.fillRect(0, 0, 400, 300);
    }
    function draw27(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext('2d');
      context.shadowOffsetX = 10;
      context.shadowOffsetY = 10;
      context.shadowColor = 'rgba(100,100,100,0.5)';
      context.shadowBlur = 1.5;
    



 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)
  • HTML5+Canvas调用手机拍照功能实现图片上传(上)
  • html5 canvas 详细使用教程

相关文章

  • 2017-05-11详谈jQuery Ajax(load,post,get,ajax)的用法
  • 2017-05-11多个上传文件用js验证文件的格式和大小的方法(推荐)
  • 2017-05-11springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
  • 2017-05-11jQuery插件zTree实现删除树节点的方法示例
  • 2017-05-11Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
  • 2017-05-11AngularJS 文件上传控件 ng-file-upload详解
  • 2017-05-11PHP:微信小程序 微信支付服务端集成实例详解及源码下载
  • 2017-05-11利用jquery正则表达式在页面验证url网址输入是否正确
  • 2017-05-11JavaScript实现瀑布流以及加载效果
  • 2017-05-11微信小程序 PHP生成带参数二维码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • JavaScript中匿名函数的递归调用
    • javascript图片预览和上传(兼容IE)
    • jQuery实现复选框的全选和反选
    • 微信小程序 PHP生成带参数二维码
    • ajax的分页查询示例(不刷新页面)
    • jquery实现提示语淡入效果
    • js实现下一页页码效果
    • 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
    • Vue2.0 UI框架ElementUI使用方法详解
    • jQuery EasyUI 页面加载等待及页面等待层

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有