canvas入门-1三种填充方式、渐变、模式

1、定义canvas的尺寸的时候最好用html的方式定义，用width和height的方式，用css会导致画布按照css设定的方式进行缩放，cavas内部是一个2d的渲染环境

2、一个canvas对应一个2d的渲染环境，绘制图形的操作都是在2d渲染环境中进行的

<canvas id="canvas-1"  style="border:solid 1px gray;" width = "400" height="400"></canvas>

　　一个简单的例子

        <script type="text/javascript">var oCanvas = document.getElementById('canvas-1');var context = oCanvas.getContext('2d');//指向2d渲染环境的引用context.fillStyle = "#FF0000";context.fillRect(20,20,100,200)</script>在400*400 的画布上绘制一个距离左边上边20px的一个100*200的矩形用#ff0000颜色填充

　　canvas的2d环境有很多api可以调用

3、fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式，上面我们直接用个的颜色，渐变指的是一个颜色渐变对象

a.首先是context创建一个线性的渐变createLinearGradient() b.然后设置渐变的范围 createLinearGradient() 3.设定颜色渐变的阶段值(addColorStop())

                var grd=context.createLinearGradient(0,0,170,0);//这是一个从左到右的渐变grd.addColorStop(0,"black");grd.addColorStop(0.5,"red");grd.addColorStop(1,"white");//从黑-->红-->白context.fillStyle = grd;context.fillRect(0,0,150,100)

var my_gradient=ctx.createLinearGradient(0,0,0,170);//从上到下
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");

                context.fillRect(0,0,200,200);var grd=context.createLinearGradient(0,0,200,200);对角线渐变grd.addColorStop(0,"black");grd.addColorStop(0.5,"red");grd.addColorStop(1,"white");context.fillStyle = grd;context.fillRect(0,0,200,200);

4、填充模式

用模式去填充图片createPattern(img,direction)；

接收2个参数，img对象，和方向的参数repeat repeat-x repeat-y

很奇怪的是我们首次运行的时候并不能绘制出来，而是通过绑定事件的方式就可以绘制出来，

必须在最后加上context.fill()这个函数，否则无法绘制。

<img src="tet.jpg" id="img" οnclick="test()">

　　　function test () {var direction = 'repeat' || 'repeat-x' || 'repeat-y';var img = document.getElementById('img');var pat = context.createPattern(img,direction);context.rect(0,0,400,400);context.fillStyle=pat;context.fill();}

转载于:https://www.cnblogs.com/knightshibiao/p/3861015.html

canvas入门-1三种填充方式、渐变、模式相关推荐

分布式锁简单入门以及三种实现方式介绍(滴滴)
很多小伙伴在学习Java的时候,总是感觉Java多线程在实际的业务中很少使用,以至于不会花太多的时间去学习,技术债不断累积!等到了一定程度的时候对于与Java多线程相关的东西就很难理解,今天需要探讨的 ...
分布式锁简单入门以及三种实现方式介绍
分布式锁简单入门以及三种实现方式介绍 2018年01月11日 21:16:28 徐刘根阅读数:37912 标签: 分布式分布式锁高并发更多个人分类: 集群分布式版权声明:本文为博主原创文章 ...
分布式锁简单入门以及三种实现方式介绍_徐刘根的博客-CSDN博客
原文地址 rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmled ...
五分钟教你使用vue-cli3创建项目（三种创建方式，小白入门必看）
五分钟教你使用vue-cli3创建项目(三种创建方式,小白入门必看) 一.搭建vue环境安装Nodejs 官网下载Nodejs,如果希望稳定的开发环境则下LTS(Long Time Support) ...
spring入门之Spring 常用的三种注入方式
Spring 常用的三种注入方式 Spring 通过 DI(依赖注入)实现 IOC(控制反转),常用的注入方式主要有三种:构造方法注入,set 方法注入,基于注解的注入. 一.通过构造方法注入先简单 ...
Kotlin实战练习——自定义圆形图片三种实现方式
Kotlin实战练习--自定义圆形图片三种实现方式前言如今Kotlin越来越重要,本人也开始了Kotlin的学习.为了检测学习效果,加深学习印象,同时回顾一下以前的一些知识点,决定从写一个自定义圆 ...
自定义View的三种实现方式及自定义属性使用介绍
自定义View的三种实现方式及自定义属性使用介绍一前言二三种自定义控件的方法 2.1 组合控件 2.2 继承控件 2.2.1 继承View类系统控件 2.2.2 继承ViewGroup类系统控 ...
linux内核 struct page结构的三种存放方式
目录 page struct的三种存放方式 1) FLATMEM 2) SPARSEMEM 3) SPARSEMEM_VMEMMAP 随着硬件能力的提升,系统内存容量变得越来越大.尤其是在服务器上,过 ...
c语言单链表存储字符串,字符串的三种存储方式
@[TOC] 在数据结构中,字符串要单独用一种存储结构来存储,称为串存储结构.这里的串指的就是字符串.无论学习哪种编程语言,操作最多的总是字符串.我们平常使用最多的存储结构无疑是利用定长数组存储.但是 ...

canvas入门-1三种填充方式、渐变、模式

canvas入门-1三种填充方式、渐变、模式相关推荐

最新文章

热门文章