<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
#canvas1{border:1px solid red}/*不建议使用CSS样式width,height 设置canvas*/
</style>
</head>
<body>
<canvas id="canvas1" width="600px" height="500px">
你的浏览器不支持canvas元素！请更新浏览器。
</canvas>
<script>
var canvas = document.getElementById('canvas1');
var c = canvas.getContext('2d');
c.beginPath();
c.moveTo(50,30);
c.lineTo(300,30);
c.strokeStyle="red";
c.lineWidth=10;
c.stroke();
//c.closePath();
var img = new Image();//创建图片对象。
img.src = '1.png';
window.onload = function(){//先完全加载，才能绘制。
c.drawImage(img,50,50);//完全绘制
}
//渐变色（线性渐变(水平，垂直)）
var linear=c.createLinearGradient(10,180,310,180);
linear.addColorStop(0,'red');
linear.addColorStop(0.2,'orange');
linear.addColorStop(0.4,'yellow');
linear.addColorStop(0.6,'green');
linear.addColorStop(0.8,'blue');
linear.addColorStop(1,'cyan');
c.fillStyle=linear;
c.fillRect(10,180,300,50);//起点，x,y(宽,长)
</script>
</body>
</html>
分享到：
相关推荐
HTML5是现代网页开发的核心标准，它在原有HTML4的基础上引入了诸多新特性，极大地提升了网页的交互性和表现力。本实例将详细讲解如何利用HTML5来构建一个完整的网站，包括布局、登录功能以及内容展示。 一、HTML5的...
HTML5是下一代网页标准，它的出现极大地丰富了网页的表现力和功能，为开发者提供了更强大的工具和更多可能性。本资源包含一个"html5网站整站源码"，这是一个基于HTML5技术构建的完整网站模板，适合用于学习和参考。...
HTML5是下一代超文本标记语言，它在2014年由W3C（World Wide Web Consortium，万维网联盟）正式发布最终规范。这个“html5最终版规范pdf版”包含的是HTML5完整且权威的标准定义，对于Web开发者来说，是理解和掌握...
HTML5是一种先进的网页标准，它在图形和交互性方面提供了许多增强功能，使得开发者能够创建出更加生动和富有表现力的网页应用。本资源包含了一系列使用HTML5和JavaScript技术实现的图表，包括饼图、柱状图和折线图，...
HTML5是一种强大的网页开发技术，它提供了许多增强用户体验的功能，包括多媒体元素的处理。然而，HTML5原生并不支持RTSP（Real Time Streaming Protocol）视频流的播放，这是专为实时音视频传输设计的一种协议。为了...
HTML5快速开发模板生成器是一种高效工具，旨在帮助开发者迅速构建基于HTML5的网页项目，大大缩短了开发周期。HTML5作为现代Web开发的标准，引入了许多新的元素、API和功能，使得网页更具交互性和表现力。这个模板...
HTML5是现代网页开发的核心标准，它在HTML4的基础上进行了大量的改进和扩展，旨在提供更丰富的功能和更好的用户体验。这个“HTML5参考手册大全7本合集”包含了多个关于HTML5及其相关版本的手册，是学习和理解HTML5的...
HTML5是下一代网页标准，它在2014年正式成为W3C推荐标准，显著地增强了网页的交互性和表现力。此“html5个人网站源码”是一个理想的起点，尤其是对于初学者，想要了解和掌握HTML5的核心特性的实践应用。 首先，`...
HTML5视频播放器是利用HTML5的`<video>`标签实现的一种网页内嵌式媒体播放功能。这个技术的出现使得开发者无需依赖Flash等第三方插件就能在网页上播放音频和视频，大大提升了用户体验，同时也降低了对浏览器兼容性的...
HTML5、CSS3和JavaScript是构建现代网页和应用程序的核心技术，它们共同构成了Web开发的三驾马车。在本篇文章中，我们将深入探讨这三种技术的详细知识点，并结合《精通html5+css3+JavaScript页面设计》这本书中的...
此为《HTML5开发精要与实例详解》的全部配套源码 本书由资深Web开发专家亲自执笔，内容的权威性上应该是毋庸置疑的。 本书在内容结构上将继承《HTML 5与CSS 3权威指南》一书的优点，几乎每个知识点都将配一个精心...
HTML5是现代网页开发的核心标准，它在2014年被正式确立为W3C推荐标准，极大地推动了互联网内容的丰富性和交互性。HTML5的出现旨在解决早期HTML版本的一些局限性，并引入了许多新的元素、属性和API，使得开发者能够更...
HTML5手机版问卷是一种基于Web技术实现的移动端调查工具，它利用HTML5的先进特性，为用户提供了一种在手机或平板电脑上填写问卷的便捷方式。本压缩包包含了一个基本的HTML5问卷模板，该模板设计简洁，易于理解和修改...
HTML5技术在现代网页开发中扮演着至关重要的角色，它为构建交互性强、功能丰富的用户界面提供了强大的支持。"html5 仿微信聊天界面"项目就是利用HTML5特性实现的一个类似微信网页版的聊天界面。这个项目展示了如何...
HTML5小游戏源码集合是一个非常宝贵的资源，尤其对于想要学习和提升HTML5游戏开发技能的开发者来说。这个压缩包包含了80个不同的小游戏，每个都是按照微信小游戏的标准和风格设计的，提供了丰富的实践素材和灵感来源...
HTML5手机网站源码是现代网页开发的重要组成部分，尤其对于初学者来说，这些源码提供了宝贵的实践和学习机会。在本篇文章中，我们将深入探讨HTML5在手机网站开发中的应用，以及通过分析30个不同的手机网站源码，你...
HTML5和CSS3是现代网页开发的两大核心技术，它们共同为网页设计师和开发者提供了丰富的功能和优雅的样式控制。此“html5+css3课件打包”资源包含了从基础到高级的一系列课程材料，旨在帮助学习者全面掌握这两门语言...
描述：“毕业翻译文献资料HTML5相关，英文，题目为《The Future of Mobile E-health Application Development: Exploring HTML5 for Context-aware Diabetes Monitoring》” 知识点解析： 1. 移动E-health应用开发...
"delphi的chrom控件，支持HTML5"意味着这个控件可以让你在Delphi创建的应用程序中嵌入一个功能完备的浏览器引擎，这个引擎不仅能够渲染HTML5页面，还能利用HTML5的新特性。这使得Delphi开发者能够构建具有现代Web...