html5画像トリミングレンダリングの適用

零下一度
リリース: 2017-04-27 15:25:07
オリジナル
1711 人が閲覧しました

HTML5 を使用して画像をトリミングするには? 後で描画されるグラフィックスはこのトリミング領域を使用します。このトリミング領域をキャンセルするには、次は

エフェクトのスクリーンショットです。


コード:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<script>
    // 图像裁剪:context.clip()

    // context.clip()只绘制封闭路径区域内的图像,不绘制路径外部图像,用的时候

    // 先创建裁剪区域

    // 再绘制图像(之后绘制的图形都会采用这个裁剪区域,要取消这个裁剪区域就需要用到保存恢复状态,下面有讲)

    // 给出圆形和星形的裁剪代码
     function createCircleClip(context) {
        context.beginPath();
        context.arc(200, 170, 100, 0, Math.PI * 2, true);
        context.closePath();
        context.clip();
    }

    function create5StarClip(context) {
        var n = 0;
        var dx = 200;
        var dy = 150;
        var s = 150;
        context.beginPath();
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 5 * 4;
        for (var i = 0; i < 5; i++) {
           var x = Math.sin(i * dig);
           var y = Math.cos(i * dig);
           context.lineTo(dx + x * s, dy + y * s);
        }
        context.closePath();
        context.clip();
    } 

	function draw() {
        var canvas = document.getElementById("mycanvas");
        if (canvas == null)
         return false;

        var context = canvas.getContext("2d");

        context.fillStyle = "black";
        context.fillRect(0, 0, 400, 300);
        image = new Image();
        image.src = "Image/html5.jpg"

        image.onload = function () {
            //圆形裁剪区
            //createCircleClip(context)
            //星形裁剪区
            create5StarClip(context);
            context.drawImage(image,0,0);
        }
        
	} 		

	window.onload=draw;
</script>
</head>
<body>
  <p id="p1"></p>
  <canvas id="mycanvas" width="1000" height="800">当前浏览器不支持canvas</canvas>
</body>
</html>
ログイン後にコピー

以上がhtml5画像トリミングレンダリングの適用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!