Canvas3——绘制渐变图形与绘制变形图形

1、Canvas绘制渐变图形

(1)绘制线性渐变
createLinearGradient()

**CanvasRenderingContext2D**.createLinearGradient()方法创建一个沿参数坐标指定的直线的渐变。该方法返回一个线性 CanvasGradient对象。


CanvasGradient _ctx_.createLinearGradient(x0, y0, x1, y1);

参数

x0
起点的 x 轴坐标。
y0
起点的 y 轴坐标。
x1
终点的 x 轴坐标。
y1

终点的 y 轴坐标。
addColorStop()

**CanvasGradient**.addColorStop() 方法添加一个由偏移值和颜色值指定的断点到渐变。如果偏移值不在0到``1之间,将抛出``INDEX_SIZE_ERR错误,如果颜色值不能被解析为有效的CSS颜色值 <color>,将抛出SYNTAX_ERR错误。

语法


void _gradient_.addColorStop(offset, color);

参数

offset

0到1之间的值,超出范围将抛出INDEX_SIZE_ERR错误
color
CSS颜色值 <color>如果颜色值不能被解析为有效的CSS颜色值<color>,将抛出SYNTAX_ERR错误。

实例代码:


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas3</title>

    <script>

        function draw(id){

            var canvas = document.getElementById(id);

            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,500,500);

            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();

            }

        }

    </script>

</head>

<body onload="draw(‘canvas‘)">

    <canvas id="canvas" width="500px" height="500px"></canvas>

</body>

</html>
(2)绘制径向渐变

**CanvasRenderingContext2D**.createRadialGradient() 是
Canvas 2D API 根据参数确定两个圆的坐标,绘制放射性渐变的方法。这个方法返回CanvasGradient

语法


CanvasGradient _ctx_.createRadialGradient(x0, y0, r0, x1, y1, r1);

参数

x0
开始圆形的 x 轴坐标。
y0
开始圆形的 y 轴坐标。
r0
开始圆形的半径。
x1
结束圆形的 x 轴坐标。
y1
结束圆形的 y 轴坐标。
r1
结束圆形的半径。

返回值

CanvasGradient
由两个指定的圆初始化的放射性 CanvasGradient 对象。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas4</title>

    <script>

        function draw(id){

            var canvas = document.getElementById(id);

            if(canvas == null){

                return false;

            }

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

            var g1 = context.createRadialGradient(400,0,0,400,0,400);

            g1.addColorStop(0.1,"rgb(255,255,0)");

            g1.addColorStop(0.3,"rgb(255,0,255)");

            g1.addColorStop(1,"rgb(0,255,255)");

            context.fillStyle = g1;

            context.fillRect(0,0,500,500);

        }

    </script>

</head>

<body onload="draw(‘canvas‘)">

    <canvas id="canvas" width="500px" height="500px"></canvas>

</body>

</html>

(3)绘制变形图形

translate(x,y) 移动
scale(x,y) 缩放
rotate(deg) 旋转

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas5</title>

    <script>

        function draw(id){

            var canvas = document.getElementById(id);

            if(canvas == null){

                return false;

            }

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

            context.fillStyle = "#eeeeef";

            context.fillRect(0,0,500,500);

            context.translate(200,50);

            context.fillStyle="rgba(255,0,0,0.25)";

            for(var i = 0;i<50;i++){

                context.translate(25,25);

                context.scale(0.95,0.95);

                context.rotate(Math.PI/10);

                context.fillRect(0,0,100,50);

            }

        }

    </script>

</head>

<body onload="draw(‘canvas‘)">

    <canvas id="canvas" width="500" height="500"></canvas>

</body>

</html>
时间: 2024-10-11 00:50:43

Canvas3——绘制渐变图形与绘制变形图形的相关文章

[ html createLinearGradient createRadialGradient 绘制背景渐变方式 ] canvas绘制渐变 createLinearGradient createRadialGradient 绘制背景渐变方式 属性实例

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

[html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中,左上方的点,为坐标轴原点(0,0). 1.绘制渐变图形 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script> 6 function draw(id){ 7 va

Canvas 绘制矩形,圆形,不规则图形(线条),渐变等图像效果

绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fillRect 方法规定了形状.位置和尺寸. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/cs

HTML5 &lt;canvas&gt; 元素用于图形的绘制,通过脚本(通常是javascript)完成

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形 可以通过多种方法使用canvas绘制路径\盒\圆以及添加图像 创建一个画布(Canvas) 一个画布在网页中是一个矩形框,通过 <canvas> 元素来绘制. 注意: 默认情况下 <canvas> 元素没有边框和内容. <canvas>简单实例如下: <canvas id="myCanvas" width="200" height="100&

Quartz2D常见图形的绘制:线条、多边形、圆

UI高级 Quartz2D http://ios.itcast.cn  iOS学院 掌握 drawRect:方法的使用 常见图形的绘制:线条.多边形.圆 绘图状态的设置:文字颜色.线宽等 图形上下文状态的保存与恢复(图形上下文栈) 图片裁剪 截图 什么是Quartz2D Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作 Ø绘制图形 : 线条\三角形\矩形\圆\弧等 Ø绘制文字 Ø绘制\生成图片(图像) Ø读取\生成PDF Ø截图\裁剪图片 Ø自定义

ios 基本图形的绘制 基于bitmap 位图

内容包括 图片水印,图片裁剪,屏幕截图,背景平铺 1.图片水印功能 #import "UIImage+MJ.h" @implementation UIImage (MJ) + (instancetype)waterImageWithBg:(NSString *)bg logo:(NSString *)logo { UIImage *bgImage = [UIImage imageNamed:bg]; // 1.创建一个基于位图的上下文(开启一个基于位图的上下文) UIGraphicsB

绘制播放音乐时的音波图形的View

这个效果类似于这个哦: 效果如下: 源码: MusicView.h 与 MusicView.m // // MusicView.h // Music // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @interface MusicView : UIView @property (nonatomic, assign) CGFloat progress; // 进程百分比,取值为[0,1]

ios 基本图形的绘制

基本图形的绘制 包括: 代码画线,画文字 图片 裁剪 重绘  简单动画 当自定义view的时候 系统会自动调用drawRect 方法 画线 - (void)drawRect:(CGRect)rect { // Drawing code // 1.获得图形上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.拼接图形(路径) // 设置线段宽度 CGContextSetLineWidth(ctx, 10); // 设置线段头尾部的样式

HTML5 Canvas ( 填充图形的绘制 ) closePath, fillStyle, fill

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css">