html5 <canvas>第二篇 strokeRect strokeStyle() strokeStyle() createLinearGradient addColorStop 用法 实心圆,空心圆,渐变

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" language="jscript" src="js6.js"></script>
</head>

<body onLoad="pageload();">
<canvas id="cnvMain" width="200px" height="150px"; onClick="cnvClick();"></canvas>
</body>
</html>
 1 @charset "utf-8";
 2 /* CSS Document */
 3
 4 body{
 5     font-size:36px;
 6 }
 7 canvas{
 8     border:dashed 1px #F00;
 9     cursor:pointer;
10 }
11 /*增加样式*/
12 p{
13     position:
14     absolute;
15     height:23px;
16     line-height:23px;
17     margin-left:10px;
18 }
19 span{
20     padding:3px;
21     border:solid 1px #033;
22     background-color:#00F;
23     cursor:pointer;
24     }
 1 // JavaScript Document
 2 function $$(id){
 3     return document.getElementById(id);
 4
 5     }
 6     function pageload(){
 7         var cnv=$$("cnvMain");
 8         var ctx=cnv.getContext("2d");
 9         //设置边框
10         ctx.strokeStyle="#3ef3ed";
11         ctx.strokeRect(30,30,80,80);
12         //设置背景
13         ctx.fillStyle="#ccc";
14         ctx.fillRect(30,30,80,80);
15         }
16         function cnvClick(){
17             var cnv=$$("cnvMain");
18         var ctx=cnv.getContext("2d");
19         //清空图形
20         ctx.clearRect(36,36,50,50);
21             }

这个是绘制一个带边框的矩形

绘制矩形边框strokeRect(x,y,width,height);

参数为“x”,“y”为矩形的起点坐标,“width”“height”分别为矩形的宽和高

设置边框颜色strokeStyle();

清空图像中的颜色 clearRect();

绘制渐变颜色

1 var c=document.getElementById("myCanvas");
2 var ctx=c.getContext("2d");
3
4 var grd=ctx.createLinearGradient(0,0,170,0);
5 grd.addColorStop(0,"black");
6 grd.addColorStop(1,"white");
7
8 ctx.fillStyle=grd;
9 ctx.fillRect(20,20,150,100);
createLinearGradient(xStar, yStar,xEnd,YEnd)xstar和ystar表示渐变开始的坐标xEnd和YEnd表示渐变结束的坐标
addColorStop(value,color);表示渐变偏移量以及渐变颜色

绘制圆
var cnv=$$("cnvMain");
        var cxt=cnv.getContext("2d");
        //清除画布原有图形1
        cxt.clearRect(0,0,280,190);
        //开始画实心圆
        cxt.beginPath();
        cxt.arc(100,100,50,0,Math.PI*2,true);
        cxt.closePath();
        //设置填充背景色
        cxt.fillStyle="#3ef3ed";
        //进行填充
        cxt.fill();

各个参数的意思;

1.getContext(“2d”);返回一个用于在画布上绘图的环境

2.beginPath():声明开始绘制路径

3.closePath();绘制完图形后关闭绘制路径。

4.填充(画实心圆

1 //设置填充背景色
2         cxt.fillStyle="#3ef3ed";
3         //进行填充
4         cxt.fill();

描边(画空心圆

//设置边框色
        cxt.strokeStyle="black";

        //设置边框宽度
    cxt.lineWidth=5;
        //进行描边
        cxt.stroke();    
 
 来自w3c
 
时间: 03-10

html5 <canvas>第二篇 strokeRect strokeStyle() strokeStyle() createLinearGradient addColorStop 用法 实心圆,空心圆,渐变的相关文章

html5 canvas贝塞尔曲线篇(下)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

html5 canvas贝塞尔曲线篇(上)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素

欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制图片 绘制文本 相关要求 环境要求:Google Chrome, Firefox, Safari, Opera, 或者 IE9以上的现代浏览器 编程要求:需要有基础的HTML和Javascript编程经验,相关的画布编程将调用Javascript API来处理 HTML Canvas基本元素 HTM

HTML5 Canvas ( 线性渐变, 升级版的星空 ) createLinearGradient, addColorStop

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css">

html5 canvas 详细使用教程

导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字 保存和恢复状态(context) 保存文件 结合setInterval制作动画 结语.demo下载   前言 <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.

HTML5 程序设计 - 使用HTML5 Canvas API

请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方便查看. 学习笔记,纯手工码字,有错别字什么的请指出,觉得好的请点个赞小小的支持下.谢谢亲们. 本篇,我们将探索如何使用HTML5和Canvas API.Canvas API很酷,可以通过它来动态生成和展示图形.图表.图像以及动画. 本篇将使用渲染API(Rendering API)的基本功能来创建

html5&lt;canvas&gt;画图

前言 <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件,其中就 有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与css3权威指南>下面对其中最好玩的canvas的学习做下读书笔记与实验. 温馨提示:以下所有实验请使用最新版的opera 基本知识     context:一直觉得这个翻译成“上下文”真够蛋疼的,context是一个封装了很多绘图功能的对象,获取这个对象的方法是        

HTML5 canvas 绘制精美的图形

HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.01 版本规范.它还引入了几个新元素和属性,它们适用许多使用 web 页面的领域 — 音频.视频.图形.数据存储.内容呈现,等等.本文主要关注图形方面的增强:canvas. 新的 HTML5 canvas 是一个原生 HTML 绘图簿,用于 JavaScript 代码,不使用第三方工具.跨

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf2

事件处理: HTML5应用程序是以事件来驱动的,可以在canvas中增加一个事件监听器,当事件发生时,浏览器就会调用这个监听器 //方法一canvas.onmousedown=function(e){ //一些代码}; //方法二canvas.addEventListener('mousedown',function(e){ //一些代码}) 基础的数学知识简介: 代数方程:(10x+5)x2=110 三角函数:180°等于π弧度 正弦.余弦.正切: sin(α)对边/斜边 cos(α)邻边/斜