学习canvas 过程中的几点总结

xuexiangjys 发布于2019-08-05 10:56 / 1157人阅读

摘要：默认尺寸为或者如果两个尺寸不一致，那么画出来的图形，和想象中的图形是有差距的。

1.canvas的画布大小与canvas元素大小

canvas尺寸分为两种，一种是canvas元素本身的尺寸，另一种是canvas画布的尺寸

canvas本身尺寸可以通过style样式来设置

.canvas{
    width:100px;
    height:100px;
}
/* 设置了元素在浏览器可以看见的尺寸 */

canvas画布尺寸通过元素width和height两个属性设置，也可以通过js给画布设置尺寸。默认尺寸为300*150

或者

var canvas=document.getElementById("canvas");
canvas.width = 100;
canvas.height = 100;

如果两个尺寸不一致，那么画出来的图形，和想象中的图形是有差距的。

2.扇形渐变的规律

扇形渐变的语法：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
// 创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象

渐变规律可以分为两种情况：

两个圆同圆心，或者两个圆属于包含关系

渐变从一个圆的圆周向另一个圆的圆周辐射渐变

// 包含
var grb = ctx.createRadialGradient(245,175,20,285,175,75);
grb.addColorStop(0, "red");
grb.addColorStop(0.5, "green");
grb.addColorStop(1, "yellow");
ctx.fillStyle = grb;

ctx.fillRect(210,100,150,150);

效果如下图的包含关系：

相交或相离

在两个圆的切线与圆周组成范围内，从开始圆的圆周向结束圆的圆周渐变

// 相交
grb = ctx.createRadialGradient(440,175,75,520,175,50);
grb.addColorStop(0, "red");
grb.addColorStop(0.5, "green");
grb.addColorStop(1, "yellow");
ctx.fillStyle = grb;

ctx.fillRect(380,100,200,150);

// 相离
grb = ctx.createRadialGradient(675,175,75,900,175,50);
grb.addColorStop(0, "red");
grb.addColorStop(0.5, "green");
grb.addColorStop(1, "yellow");
ctx.fillStyle = grb;

ctx.fillRect(600,100,300,150);

效果如上图的相交和相离，在切线与圆周组成的范围内渐变

超融合服务器 idc机房托管 cdn回源的几点问题存储过程总结 vps日常维护中的一些要点总结机器学习学习总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/56049.html

学习canvas 过程中的几点总结

摘要：默认尺寸为或者如果两个尺寸不一致，那么画出来的图形，和想象中的图形是有差距的。 1.canvas的画布大小与canvas元素大小 canvas尺寸分为两种，一种是canvas元素本身的尺寸，另一种是canvas画布的尺寸 canvas本身尺寸可以通过style样式来设置 .canvas{ width:100px; height:100px; } /* 设置了元素在浏...

notebin 2019-08-29 12:14 评论0 收藏0
sass学习总结的几点

摘要：详细的学习网址中文网的几大特性变量嵌套混合器继承了解了保持条理性和可读性的最基本的三个方法嵌套导入和注释。为了解决这种以及其他情况，提供了一个特殊结构这意味着这条规则将会被应用到选择器，元素内链接的所有子元素在被时都会变成红色。详细的学习网址：http://www.sasschina.com/guide/ saa中文网 Sass的几大特性：变量嵌套混合器@minxin...

plus2047 2019-08-29 11:33 评论0 收藏0
关于程序员写好 ppt 的几点总结 - 前端张大胖

摘要：背景程序员日常工作中最多的应该是接收需求编码实现需求。内容决定形式，形式依赖于内容，并随内容的发展而发展。我也只做到了图形搭配阶段，配图就比较麻烦，如果要是能确定关键词也可以，百度搜索即可。具体的网站百度找下就可以了，就不发地址了。背景程序员日常工作中最多的应该是接收需求、编码实现需求。但也有些时候需要做一些非代码的文字工作。比如做述职报告、工作总结等，这些一般的都是通过 ppt...

Cobub 2019-08-02 16:13 评论0 收藏0
关于程序员写好 ppt 的几点总结 - 前端张大胖

摘要：背景程序员日常工作中最多的应该是接收需求编码实现需求。内容决定形式，形式依赖于内容，并随内容的发展而发展。我也只做到了图形搭配阶段，配图就比较麻烦，如果要是能确定关键词也可以，百度搜索即可。具体的网站百度找下就可以了，就不发地址了。背景程序员日常工作中最多的应该是接收需求、编码实现需求。但也有些时候需要做一些非代码的文字工作。比如做述职报告、工作总结等，这些一般的都是通过 ppt...

shiyang6017 2019-08-23 16:59 评论0 收藏0
关于程序员写好 ppt 的几点总结 - 前端张大胖

摘要：背景程序员日常工作中最多的应该是接收需求编码实现需求。内容决定形式，形式依赖于内容，并随内容的发展而发展。我也只做到了图形搭配阶段，配图就比较麻烦，如果要是能确定关键词也可以，百度搜索即可。具体的网站百度找下就可以了，就不发地址了。背景程序员日常工作中最多的应该是接收需求、编码实现需求。但也有些时候需要做一些非代码的文字工作。比如做述职报告、工作总结等，这些一般的都是通过 ppt...

Jackwoo 2019-08-05 16:44 评论0 收藏0