跳转至内容
上海创厦网络科技
IT服务专家
上海创厦网络科技上海创厦网络科技
  • 首页
  • 网站建设
  • IT服务
  • 平面设计
  • 网络工程
  • 首页
  • 网站建设
  • IT服务
  • 平面设计
  • 网络工程

html5-canvas中使用clip抠出一个区域的示例代码

您在这里:
  1. 首页
  2. HTML5
  3. html5…

本想在一个fillRect中抠出一个区域来给我用的,这个是在学clip方法的时候用到的

但是怎么也弄不出扣的区域,代码如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title></title> 
    </head> 
    <body> 
        <canvas id="canvas" width="800" height="600"></canvas> 
    </body> 
    <script type="text/javascript"> 
        var canvas = document.getElementById("canvas"); 
        var context = canvas.getContext("2d"); 
        context.fillStyle = "lightgreen"; 
        context.fillRect(0, 0, canvas.width, canvas.height); 
        context.beginPath(); 
        context.fillRect(100, 100, 200, 100); 
        context.clip(); 
        context.closePath(); 
        context.fillStyle = "lightblue"; 
        context.fillRect(0, 0, canvas.width, canvas.height); 
    </script> 
</html> 

发现如果要抠出一个新的路径的话应该使用rect、arc等方法

所有应该在改为

?
1
2
3
context.beginPath(); 
context.rect(100, 100, 200, 100); 
context.clip();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

Category: HTML5startupplaza2022年5月30日评论

作者: startupplaza

文章导航

历史的文章历史的文章:Html5 localStorage入门教程未来的文章未来的文章:canvas实现飞机打怪兽射击小游戏的示例代码

Related Posts

使用HTML5捕捉音频与视频信息概述及实例
2022年5月30日
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2022年5月30日
HTML5移动开发图片压缩上传功能
2022年5月30日
纯HTML5+CSS3制作生日蛋糕代码
2022年5月30日
HTML5地理定位与第三方工具百度地图的应用
2022年5月30日
解决img标签上下出现间隙的方法
2022年5月30日

技术探讨

  • 使用HTML5捕捉音频与视频信息概述及实例
  • HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
  • 详解HTML5中的