JavaScript强化教程——canvas

Stella981
• 阅读 625

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— canvas

使用 strokeText(): 使用 "Arial" 字体在画布上绘制一个高 30px 的文字(空心): JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);

Canvas - 渐变 渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。 以下有两种不同的方式来设置Canvas渐变: createLinearGradient(x,y,x1,y1) - 创建线条渐变 createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变 当我们使用渐变对象,必须使用两种或两种以上的停止颜色。 addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1. 使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线。 使用 createLinearGradient():

创建一个线性渐变。使用渐变填充矩形: JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");

// Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white");

// Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);

点击进入JS强化教程:http://www.h5edu.cn/htm/step/h5edu_44.html

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解2016年09月02日00:00:36 \牧野(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fme.csdn.net%2Fdcrmg) 阅读数:59593
Wesley13 Wesley13
3年前
P2P技术揭秘.P2P网络技术原理与典型系统开发
Modular.Java(2009.06)\.Craig.Walls.文字版.pdf:http://www.t00y.com/file/59501950(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.t00y.com%2Ffile%2F59501950)\More.E
Stella981 Stella981
3年前
JavaScript强化教程——正则表达式回溯
本文为 H5EDU(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.h5edu.cn%2F) 机构官方 HTML5培训(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.h5edu.cn%2F) 教程,主要
Easter79 Easter79
3年前
Swift项目兼容Objective
!456.jpg(http://static.oschina.net/uploads/img/201509/13172704_1KcG.jpg"1433497731426906.jpg")本文是投稿文章,作者:一叶(博客(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2F00red
Stella981 Stella981
3年前
JavaScript强化教程——jQuery
本文为 H5EDU(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.h5edu.cn%2F) 机构官方 HTML5培训(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.h5edu.cn%2F) 教程,主要
Easter79 Easter79
3年前
The Complete Guide To Rooting Any Android Phone
PhoneWhitsonGordon(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.lifehacker.com.au%2Fauthor%2Fwhitsongordon%2F)7April,20118:00AMShare(https://ww
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这