<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        * {margin: 0;padding: 0}

        canvas {border: 2px dotted #ddd}

    </style>

</head>

<body>

    <canvas id=drawingCanvas width=500 height=300></canvas>

    <script>

        var canvas = document.getElementById('drawingCanvas')

        var context = canvas.getContext('2d')

        var img = new Image()

        img.onload = function() {

            // 伸缩

            //context.drawImage(img, 0, 0, 150, 112.5)

            // 阴影

            //context.shadowOffsetX = 20

            //context.shadowOffsetY = 20

            //context.shadowColor = 'black'

            //context.shadowBlur = 5

            // 裁剪

            context.drawImage(img, 0, 0, 50, 25, 0, 0, 50, 25)

            // 填充图案

            var pattern = context.createPattern(img, 'repeat')

            context.fillStyle = pattern

            context.rect(100, 100, 400, 200)

            context.fill()

            // 填充渐变

            var gradient = context.createLinearGradient(0, 0, 100, 100)

            gradient.addColorStop(0, 'rgba(0,0,0,0.5)')

            gradient.addColorStop(1, 'rgba(255,255,255,0.5)')

            context.rect(0, 0, 100, 100)

            context.fillStyle = gradient

            context.fill()

        }

        img.src = 'http://tp2.sinaimg.cn/1416973497/50/5655097303/0'

        // 绘制文本

        context.font = 'bold 20px arial'

        context.textBaseline = 'top'

        context.fillStyle = 'black'

        context.fillText('hello', 400, 10)

        context.font = 'bold 40px arial'

        context.lineWidth = '1'

        context.strokeStyle = 'red'

        context.strokeText('wolrd', 0, 200)

    </script>

</body>

</html>

【canvas】伸缩 / 剪裁 / 文本 / 阴影 / 填充图案 / 填充渐变的更多相关文章

  1. html5 canvas用图案填充形状

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. SVG图案填充-Pattern

    SVG图案一般用于SVG图形对象的填充fill或描边stroke.这个图形可以是一个SVG元素,也可以是位图图像,通过<pattern>元素在x轴或y轴方向以固定的间隔平铺. <pa ...

  3. 用openGL实现用黑白相间的棋盘图案填充多边形

    #include<gl/glut.h> #include<windows.h> ; ,b0=,a1=,b1=,a2=,b2=,a3=,b3=; ,winHeight=; voi ...

  4. 使用 jquery-autocomplete插件 完成文本框输入自动填充联想效果 解决兼容IE输入中文问题

    项目中有时会用到ajax自动补全查询,就像Google的搜索框中那样,输入汉字或者字母的首个字母,则包含这个汉字或者字母的相关条目会显示出来供用户选择,该插件就是实现这样的功能的.autocomple ...

  5. CAD参数绘制图案填充（网页版）

    绘制工程图,常常需要将某种图案填充到某一区域,例如剖面线的绘制.MxCAD提供了丰富的填充图案,可以利用这些图案进行快速填充. js中实现代码说明: function DrawPathToHatch2 ...

  6. css（字体，文本，边距，边框，阴影，背景，渐变，多重背景，列表）

    font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size ...

  7. CSS3学习（圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等）

    matrix CSS3 1.  圆角 border-radius:边框圆角的圆角半径 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值:第一个值为左上角, 第二 ...

  8. 文本溢出text-overflow和文本阴影text-shadow

    前面的话 CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别.因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性. ...

  9. WPF入门(四)->线形区域Path内容填充之填充图(ImageBrush)

    原文:WPF入门(四)->线形区域Path内容填充之填充图(ImageBrush) 前面我们提到了LinearGradientBrush可以用来画渐变填充图,那么我们同时也可以使用ImageBr ...

随机推荐

  1. 向SQL2008R2导入Acess、excel数据

    一:导入Access数据 1.在sql2008查询分析 器中输入如下查询语句能查出access中的数据 SELECT * FROM OpenDataSource( 'Microsoft.Jet.OLE ...

  2. Objective-c单例模式详解

    转载自:http://www.jianshu.com/p/85618bcd4fee 单例模式出现以后,关于它的争执就一直存在.在开发项目中,有很多时候我们需要一个全局的对象,而且要保证全局有且仅有一份 ...

  3. 反射 介绍System.Type类

    本节先介绍system.Type类,通过这个类可以访问关于任何数据类型的信息. 1. system.Type类以前把Type看作一个类,但它实际上是一个抽象的基类.只要实例化了一个Type对象,实际上 ...

  4. Mysql笔记【1】-数据库的基本操作（创建/删除）

    1.创建数据库 创建数据库(如果存在,则报错) #创建名称为test的数据库 create database test 查询创建完的数据库 show databases 2.删除数据库 删除数据库(如 ...

  5. Java中“|”和“||”用法的区别

    例子: int a = 5; int b = 10; if(a > 4 | b++ > 10) { System.out.println("a:"+a+"\n ...

  6. 【转】PHP程序员的技术成长规划

    按照了解的很多PHP/LNMP程序员的发展轨迹,结合个人经验体会,抽象出很多程序员对未来的迷漫,特别对技术学习的盲目和慌乱,简单梳理了这个每个阶段PHP程序员的技术要求,来帮助很多PHP程序做对照设定 ...

  7. Ubuntu下gcc及g++环境配置

    直接在命令行中输入以下命令即可. sudo apt-get install build-essential 安装完成后输入 gcc 和 g++ 进行确认.

  8. HTML XML XHTML DHTML区别与联系

    (1)HTML HTML是超文本标记语言 (2)XML XML是可扩展标识语言,但XML是一种能定义其他语言的语. XML最初设计的目的是弥补HTML的不足, 以强大的扩展性满足网络信息发布的需要 , ...

  9. 织梦DedeCMS网站地图模板

    亲和百度蜘蛛,分页多层次特色,织梦系统最好用的网站地图! 用 DedeCMS(织梦) 系统搭建的网站多数都是以优化为主要目标的网站类型,既然是优化站 SEO 手段就离不开为网站设置网站地图.可是 De ...

  10. JavaScript模块化开发实例

    最近接触了一些JavaScript开发的例子,在这里与大家一起分享一下: 例子:当我们一个团队在写Js文件的时候,你一个人写的JS代码自己可以看懂也可以维护,但是别人想对你的JS进行扩展的话,如果都在 ...